Angular 2 and Spring Boot: Development Environment Setup for Full Stack Developers

Web clients have come a long way from the days of simply being static assets and templates for some server side language-specific project structure. Nowadays, any meaningful web client requires their own project space complete with frameworks, dependencies, development best practices, and even run and build tools.

A full development environment designed for building large, highly Agile applications is fairly complex and must support the various needs of multiple teams working on the same project. The frontend and UX teams work on the client-side of the project to develop, test, build, and deploy it to a web server (or cluster of web servers); while the server side team implements the APIs and deploys them to a scalable environment (SOA or Micro Services).

But not all applications are big in terms of size and scale, and some may prefer to keep the infrastructure, deployment, and production management simple. And, as always, the budget is definitely another constraint. With greater complexity comes a greater cost. So, if you are in the situation where you would like to start a new project with just a few full stack developers and want to keep your future options open to eventually have dedicated teams for front end and server side separation – then the environment setup that I am about to introduce may be just what you were looking for.

By the End of This Tutorial, You Will Have …

1. A complete reliable project setup within one IDE where:

    a. Client side code changes will be watched, deployed, and refreshed automatically.

    b. Server side code changes will be watched, deployed, and refreshed automatically.

    c. Complete view and understanding of client and server code base.

2. A process to generate tarballs for easy deployment to any Servlet Container (Apache Tomcat etc).

 3. Independence of client and server projects so, if required, projects can be:

    a. Compiled and run independently.

    b. Developed, extended, and managed by separate individual teams or developers.

What Will the Project Structure Look Like?

Most organizations have some form of folder structure based on predefined (and sometimes arbitrary) corporate perspectives to organize their code bases. This folder structure is different from the functional structure of modules (for client side) and packages (for Java Server side). Consider the project structure used in this tutorial as more like your workspace folder structure, and it will align directly with your code repository. For this tutorial the following structure will be used as the workspace:

|- learn
    |- fullstack
        |- ngspring
            |-demo-app-client (this is the project directory for client – DO NOT create this directory for now)
            |-demo-app-server (this is the project directory for server – DO NOT create this directory for now)

Prerequisites

1. Install Node.js

Link: https://nodejs.org/en/
Open the command prompt, and run command node -v & npm -v and the output should look like the screenshot below.

2. Install Angular-CLI

Link: https://cli.angular.io/
Install angular-cli using the command prompt by running the command “npm install –g angular-cli”
Note: Many corporate environments have web proxies in place, so if that is true in your case, set the proxy before attempting the install by running the following commands:
npm config set proxy <your proxy>
npm config set https-proxy <your proxy>

3. Install JDK

Link: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
Open the command prompt, and run the command “java -version,” and you should have an output like below confirming that Java is installed. If Java is not found, or if you have an older version installed, then follow the web link above to download and install the latest JDK.

4. Install Eclipse IDE With Typescript Plug-In

I prefer using STS (Spring Tool Suite) for my IDE when working with Spring-based projects, but this can be considered a personal choice. If you want you can use vanilla Eclipse, but in some of the tutorial examples I will make reference to STS, so if you just use Eclipse or another editor, you may have to do an extra step or two.

• STS Link: https://spring.io/tools/sts/all

• Eclipse Link: https://www.eclipse.org/downloads/eclipse-packages/

• Typescript Update Site: https://github.com/palantir/eclipse-typescript

Server Project Setup

1. Fire up STS and create a new Spring Boot Application using the “Spring Starter Project” Type.

Note: Change “Packaging” to “War” if you intend to deploy your project to a Servlet Container (like Tomcat etc).

2. Click next, and select any number of Spring Boot Starters you may need. For this tutorial, I would recommend just selecting “Web” that we will use to return a classic “Hello World” from the server.

3. Click finish. The “demo-app-server” project will be created in your workspace. Next, right-click on the project and go to “Spring Tools”, and click “Add Boot Devtools.” This will enable the server side code watch and hot deployment features.

4. Now, like any other awesome tutorial, let’s create a simple REST controller to return a greeting message and map it to URL “/api/hello”.

package org.demo.web;

import org.springframework.web.bind.annotation.RequestMapping;

@org.springframework.web.bind.annotation.RestController
public class RestController {
 @RequestMapping("/api/hello")
 public String greet() {
  return "Hello from the other side!!!";
 }
}

5. Start the server, and go to link: http://localhost:8080/api/hello.

If you see the message “Hello from the other side!!!” in your browser window, then voila! Your server is up and running.

Client Project Setup

1. Open the command prompt and go to the workspace directory.
“cd \learn\fullstack\ngspring”

2. Execute the following command to create a new Angular 2 Project. Be sure to execute the command within the workspace directory because many subdirectories are going to be created under the directory where the command is executed.

ng new demo-app-client

3. Once the project is created, switch back to Eclipse and import the new client project code using the “File -> Import” Menu as shown below.

Click next, and navigate to your workspace where the “demo-app-client” project has just been created.

4. Select the project, and click Finish. A new project called “demo-app-client” should be visible in Eclipse as shown below.

5. Let’s now make sure the client project is working fine. If you want, you can open “Command Prompt” and navigate to the “demo-app-client” directory and execute the command “npm start.”  I personally, however, do not like flipping back and forth between windows, and instead, prefer to do everything within a single IDE. Eclipse has a “not so great” terminal view, but at least it works. To enable the terminal view, go to Menu Window -> Show View -> Others.

Search for “terminal” and when you find the terminal view, select it and click “Ok.”

An extra tip to save the effort of having to repetitively “cd” to navigate to client project home every time is to configure the terminal’s default directory to be “/learn/fullstack/ngspring/demo-app-client”.

Once you have a terminal open, run the command “npm start”. The client project will start with its own server listening on port 4200 and any changes in the client project directory will be watched and automatically picked up. 

6. If you’ve made it this far, then great, your client side of the project is working too! Although optional, at this time I would recommend taking a little time to cleanup project artifacts that won’t be needed, are automatically regenerated, or anything that I won’t be changing myself. For example, the node_modules directory, .map files, and so on. Removing this clutter from the view not only makes the project visually cleaner, it also helps improve Eclipse’s performance as well. So to remove these items from the project view go to the Project’s Properties configuration screen as shown below.

Expand “Resource” from the right, and select Resource Filters. This is the place that lets you control your project’s view. Below are the settings to remove “node_modules” – follow the same patterns for all other artifacts that you want to remove. As an added good practice, I would recommend adding these items to your source control’s ignore file too. It is best to not check in folders like “node_modules” into your code repository.

Client-Server Integration

Now, both server and client projects are working independently on ports 8080 and 4200 respectively. It’s now time to integrate both layers and the client project’s server will be the main entry point (http://localhost:4200/) and all requests will be served by this server except URLs with the pattern “/api/”. The client server at 4200 will proxy any “/api/” requests to the “backend” server at “localhost: 8080”.
To configure this setup, create a file “proxy.conf.json” in the demo-app-client directory with the following contents.

{
“/api” :{
“target” : “http://localhost:8080”,
“secure” : false
}
}

Modify the start script to "start": "ng server --proxy-config proxy.conf.json" in package.json as shown below (Line no 7). Now restart the server using the “npm start” command.

Just to make sure everything is flowing well, trying accessing the following URLS using your web browser.

1. http://localhost:4200/ - The contents will be delivered from “demo-app-client” project.

2. http://localhost:4200/api/hello - The contents will be delivered from “demo-app-server” project running at localhost:8080.

Build and Deployment

Ideally, for any non-trivial use case, you should build your client and server independently, and deploy client bundles (static resources) to your choice of web server such as Apache, NGINX, IIS etc., and application server running your choice of servlet container such as Tomcat, Jetty, etc.
However, if you need something quick, you can use the following steps to generate a single deployable war file.

1. Build Client - Go to “demo-app-client” project directory and run the ng build -prod command.

2. Build Server to generate a deployable war. We can do this by right clicking on the “demo-app-server” project” and clicking Run As -> Maven Install. But before we do this, we have to modify our pom.xml to include static resources from the “demo-app-client” project as shown below.

<plugin>
<artifactId>maven-resources-plugin</artifactId>
<executions>
      <execution>
          <id>copy-resources</id>
          <phase>validate</phase>
          <goals><goal>copy-resources</goal></goals>
          <configuration>
              <outputDirectory>${basedir}/target/classes/static/</ outputDirectory >
              <resources>
                  <resource>
                      <directory>${basedir}/../ demo-app-client/dist</ directory >
                  </resource>
              </resources>
          </configuration>
      </execution>
</executions>
</plugin>

Once the build is complete, just drop the generated war file into any servlet container and have fun!

A few things to watch out for:

1. URL bookmarking will not work. You will either always have to start from the home page or you will need to add extra configuration within the project to resolve urls at the Spring MVC level.

2. Eclipse’s Typescript plug-in is not that great, but I’m hoping that support will improve down the road.

Hope this guide helps you on your way to creating some amazing applications. Happy coding!

If you enjoyed this article and want to learn more about Angular, check out our compendium of tutorials and articles from JS to 8.