Search icon
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletters
Free Learning
Arrow right icon
Hands-On Full Stack Development with Spring Boot 2.0 and React
Hands-On Full Stack Development with Spring Boot 2.0 and React

Hands-On Full Stack Development with Spring Boot 2.0 and React: Build modern and scalable full stack applications using the Java-based Spring Framework 5.0 and React

By Juha Hinkula
€28.99 €19.99
Book Jun 2018 302 pages 1st Edition
eBook
€28.99 €19.99
Print
€37.99
Subscription
€14.99 Monthly
eBook
€28.99 €19.99
Print
€37.99
Subscription
€14.99 Monthly

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Buy Now

Product Details


Publication date : Jun 21, 2018
Length 302 pages
Edition : 1st Edition
Language : English
ISBN-13 : 9781789138085
Category :
Languages :
Table of content icon View table of contents Preview book icon Preview Book

Hands-On Full Stack Development with Spring Boot 2.0 and React

Chapter 1. Setting Up the Environment and Tools – Backend

In this chapter, we will set up the environment and tools needed for backend programming with Spring Boot. Spring Boot is a modern Java-based backend framework that makes development faster than traditional Java-based frameworks. With Spring Boot, you can make a standalone web application that has an embedded application server.

In this chapter, we will look into the following:

  • Building the environment for Spring Boot development
  • The basics of Eclipse IDE and Maven 
  • Creating and running Spring Boot projects
  • Solving common problems of running Spring Boot applications

Technical requirements


Java SDK version 8 or higher is necessary to use of Eclipse IDE.

In this book, we are using the Windows operating system, but all tools are available for Linux and macOS as well.

Setting up the environment and tools


There are a lot of different IDE tools that you can use to develop Spring Boot applications. In this book, we are using Eclipse, that is an open source IDE for multiple programming languages. We will create our first Spring Boot project by using the Spring Initializr project starter page. The project is then imported into Eclipse and executed. Reading the console log is a crucial skill when developing Spring Boot applications.

Installing Eclipse

Eclipse is an open source programming IDE developed by the Eclipse Foundation. An installation package can be downloaded from https://www.eclipse.org/downloads. Eclipse is available for Windows, Linux, and macOS. You should download the latest version of Eclipse IDE for Java EE developers.

You can either download a ZIP package of Eclipse or an installer package that executes the installation wizard. If using the ZIP package, you just have to extract the package to your local disk and it will contain an executable Eclipse.exe file, that you can run by double-clicking on the file.

The basics of Eclipse and Maven

Eclipse is an IDE for multiple programming languages, such as Java, C++, and Python. Eclipse contains different perspectives for your needs. A perspective is a set of views and editors in the Eclipse Workbench. The following screenshot shows common perspectives for Java development:

On the left side, we have Project Explorer, where we can see our project structure and resources. Project Explorer is also used to open files by double-clicking on them. The files will be opened in the editor, that is located in the middle of the workbench. The Console view can be found in the lower section of the workbench. The Consoleview is really important because it shows application logging messages.

You can get the Spring Tool Suite (STS) for Eclipse if you want, but we are not going to use it in this book because the plain Eclipse installation is enough for our purposes. STS is a set of plugins that makes Spring application development easier (https://spring.io/tools).

Apache Maven is a software project management tool. The basis of Maven is the project object model (pom). Maven makes the software development process easier and it also unifies the development process. You can also use another project management tool called Gradle with Spring Boot, but in this book, we will focus on using Maven.

The pom is a pom.xml file that contains basic information about the project. There are also all the dependencies that Maven should download to be able to build the project.

Basic information about the project can be found at the beginning of the pom.xml file, which defines, for example, the version of the application, packaging format, and so on.

The minimum version of the pom.xml file should contain the project root, modelVersion, groupId, artifactId, and version.

Dependencies are defined inside the dependencies section, as follows:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.packt</groupId>
  <artifactId>cardatabase</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>jar</packaging>

  <name>cardatabase</name>
  <description>Demo project for Spring Boot</description>

  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.0.1.RELEASE</version>
    <relativePath/> <!-- lookup parent from repository -->
  </parent>

  <dependencies>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-test</artifactId>
      <scope>test</scope>
    </dependency>
  </dependencies>
</project>

Maven is normally used from the command line. Eclipse contains embedded Maven, and that handles all the Maven operations we need. Therefore, we are not focusing on Maven command-line usage here. The most important thing is to understand the structure of the pom.xml file and how to add new dependencies to it.

Creating the project with Spring Initializr

We will create our backend project with Spring Intializr, that is a web-based tool that's used to create Spring Boot projects. Spring Intializr can be found at https://start.spring.io:

We will generate a Maven project with Java and the latest Spring Boot version. In the Group field, we will define our group ID, that will also become a base package in our Java project. In the Artifact field, we will define the artifact ID, that will also be the name of our project in Eclipse.

In the Dependencies section, we will select the starters and dependencies that are needed in our project. Spring Boot provides starter packages that simplify your Maven configuration. Spring Boot starters are actually a set of dependencies that you can include in your project. You can either type the keyword of the dependency into the search field, or you can see all available dependencies by clicking on the Switch to the full version link.  We will start our project by selecting two dependencies—Web and DevTools. You can type the dependencies into the search field or switch to the full version and see all the starter packages and dependencies available:

The DevTools dependency provides us with Spring Boot development tools, that provide automatic restart functionality. It makes development much faster because the application is automatically restarted when changes have been saved. The web starter pack is a base for full-stack development and provides embedded Tomcat.

Finally, you have to press the Generate Project button and that generates the project starter ZIP package for us.

How to run the project

  1. Extract the project ZIP package that we created in the previous topic and open Eclipse.
  2. We are going to import our project into Eclipse IDE. To start the import process, select the File | Import menu and the import wizard will be opened. The following screenshot shows the first page of the wizard:

  1. In the first phase, you should select Existing Maven Projects from the list under the Maven folder, and then go to the next phase by pressing the Next button. The following screenshot shows the second step of the import wizard:
  1. In this phase, select the extracted project folder by pressing the Browse... button. Then, Eclipse finds the pom.xml file from the root of your project folder and shows it inside the Projects section of the window.

 

  1. Press the Finish button to finalize the import. If everything went correctly, you should see the cardatabase project in Eclipse Project Explorer. It takes a while when the project is ready because all dependencies will be loaded by Maven after import. You can see the progress of the dependency download at the bottom-right corner of Eclipse. The following screenshot shows Eclipse Project Explorer after successful import:

The Project Explorer also shows the package structure of our project, and now at the beginning there is only one package called com.packt.cardatabase. Under that package is our main application class, calledCardatabaseApplication.java.

  1. Now, we don't have any functionality in our application, but we can run it and see whether everything has started successfully. To run the project, open the main class by double-clicking on it and then pressing the Run button in the Eclipse toolbar, or select the run menu and press Run as | Java Application:

You can see the Console view opening in Eclipse, and that contains important information about the execution of the project. This is the view where all log texts and error messages appear, and it is therefore really important to check the content of the view when something goes wrong.

Now, if the project was executed correctly, you should see the text Started CardatabaseApplication in... at the end of the console. The following screenshot shows the content of the Eclipse console after our Spring Boot project has been started:

In the root of our project there is the pom.xml file, that is the Maven configuration file for our project. If you look at the dependencies inside the file, you can see that there are now dependencies that we selected on the Spring Initializr page. There is also a test dependency included automatically without any selection. In the next chapters, we are going to add more functionality to our application, and then we will add more dependencies manually to the pom.xml file:

  <dependencies>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-devtools</artifactId>
      <scope>runtime</scope>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-test</artifactId>
      <scope>test</scope>
    </dependency>
  </dependencies>

Let's look at the Spring Boot main class more carefully. At the beginning of the class, there is the @SpringBootApplication annotation. It is actually a combination of multiple annotations, such as, the following:

Annotation

Description

@EnableAutoConfiguration

Enables Spring Boot automatic configuration. Spring Boot will automatically configure your project based on dependencies. For example, if you have the spring-boot-starter-web dependency, Spring Boot assumes that you are developing a web application and configures your application accordingly.

@ComponentScan

Enables the Spring Boot component scan to find all components from your application.

@Configure

Defines the class that can be used as a source of bean definitions.

 

The following code shows the Spring Boot application's main class:

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class CardatabaseApplication {

  public static void main(String[] args) {
    SpringApplication.run(CardatabaseApplication.class, args);
  }
}

The execution of the application starts from the main method, as in standard Java applications.

Note

It is recommended to locate the main application class in the root package above other classes. Quite a common reason for an application to not work correctly is due to a situation where Spring Boot can't find some critical classes.

Spring Boot development tools

Spring Boot development tools make the application development process easier. Projects will include the developer tools if the following dependency is added to the Maven pom.xml file:

    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-devtools</artifactId>
      <scope>runtime</scope>
    </dependency>

Development tools are disabled when you create a fully-packed production version of your application.

The application is automatically restarted when you make changes to your project classpath files. You can test that by adding one comment line to your main class. After saving the file, you can see in the console that the application has restarted:

package com.packt.cardatabase;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class CardatabaseApplication {

  public static void main(String[] args) {
    // After adding this comment the application is restarted
    SpringApplication.run(CardatabaseApplication.class, args);
  }
}

Logs and problem solving

Spring Boot starter packages provide a logback, that we can use for logging without any configuration. The following sample code shows how to use logging:

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class CardatabaseApplication {
  private static final Logger logger = LoggerFactory.getLogger(CardatabaseApplication.class);
  public static void main(String[] args) {
    SpringApplication.run(CardatabaseApplication.class, args);
    logger.info("Hello Spring Boot");
  }
}

Logging messages can be seen in the console after you run the project:

There are seven different levels for logging—TRACE, DEBUG, INFO, WARN, ERROR, FATAL, and OFF. You can configure the level of logging in your Spring Boot application.properties file. The file can be found in the resources folder inside your project:

If we set the logging level to INFO, we can see log messages from levels that are under INFO (INFO, WARN, ERROR, and FATAL). In the following example, we set the log level for the root, but you can also set it at the package level:

logging.level.root=INFO

Now, when you run the project, you can't see the TRACE and DEBUG messages anymore. That might be a good setting for a production version of your application:

Spring Boot is using Apache Tomcat (http://tomcat.apache.org/) as an application server, by default. As a default, Tomcat is running in port 8080. You can change the port in the application.properties file. The following setting will start Tomcat in port 8081:

server.port=8081

If the port is occupied, the application won't start and you will see the following message in the console:

You have to stop the process that is listening on port 8080 or use another port in your Spring Boot application.

Installing MariaDB

In the next chapter, we are going to use MariaDB, and therefore we will install it locally to your computer. MariaDB is a widely used open source relational database. MariaDB is available for Windows and Linux, and you can download the latest stable version from https://downloads.mariadb.org/. MariaDB is developed under a GNU GPL 2 license.

For Windows, there is the MSI installer, that we will use here. Download the installer and execute it. Install all features from the installation wizard:

In the next step, you should give the password for the root user. This password is needed in the next chapter, when we connect to the database with our application:

In the next phase, we can use the default settings:

Now the installation starts, and MariaDB will be installed to your local computer. The installation wizard will install HeidiSQL for us. This is a graphically easy-to-use database client. We will use this to add a new database and make queries to our database. You can also use the Command Prompt included in the installation package:

Summary


In this chapter, we installed the tools that are needed for backend development with Spring Boot. For Java development, we used Eclipse IDE, that is a widely used programming IDE. We created a new Spring Boot project by using the Spring Initializr page. After creating the project, it was imported to Eclipse and, finally, executed. We also covered how to solve common problems with Spring Boot and how to find important error and log messages. Finally, we installed a MariaDB database, that we are going to use in the next chapter.

Questions


  1. What is Spring Boot?
  2. What is Eclipse IDE?
  3. What is Maven?
  4. How do we create a Spring Boot project?
  5. How do we run a Spring Boot project?
  6. How do we use logging with Spring Boot?
  7. How do we find error and log messages in Eclipse?
Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • Develop resourceful backends using Spring Boot and faultless frontends using React.
  • Explore the techniques involved in creating a full-stack app by going through a methodical approach.
  • Learn to add CRUD functionalities and use Material UI in the user interface to make it more user-friendly.

Description

Apart from knowing how to write frontend and backend code, a full-stack engineer has to tackle all the problems that are encountered in the application development life cycle, starting from a simple idea to UI design, the technical design, and all the way to implementing, testing, production, deployment, and monitoring. This book covers the full set of technologies that you need to know to become a full-stack web developer with Spring Boot for the backend and React for the frontend. This comprehensive guide demonstrates how to build a modern full-stack application in practice. This book will teach you how to build RESTful API endpoints and work with the data access Layer of Spring, using Hibernate as the ORM. As we move ahead, you will be introduced to the other components of Spring, such as Spring Security, which will teach you how to secure the backend. Then, we will move on to the frontend, where you will be introduced to React, a modern JavaScript library for building fast and reliable user interfaces, and its app development environment and components. You will also create a Docker container for your application. Finally, the book will lay out the best practices that underpin professional full-stack web development.

What you will learn

• Create a RESTful web service with Spring Boot • Understand how to use React for frontend programming • Gain knowledge of how to create unit tests using JUnit • Discover the techniques that go into securing the backend using Spring Security • Learn how to use Material UI in the user interface to make it more user-friendly • Create a React app by using the Create React App starter kit made by Facebook

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Buy Now

Product Details


Publication date : Jun 21, 2018
Length 302 pages
Edition : 1st Edition
Language : English
ISBN-13 : 9781789138085
Category :
Languages :

Table of Contents

24 Chapters
Title Page Chevron down icon Chevron up icon
Copyright and Credits Chevron down icon Chevron up icon
Dedication Chevron down icon Chevron up icon
Packt Upsell Chevron down icon Chevron up icon
Contributors Chevron down icon Chevron up icon
Preface Chevron down icon Chevron up icon
Setting Up the Environment and Tools – Backend Chevron down icon Chevron up icon
Using JPA to Create and Access a Database Chevron down icon Chevron up icon
Creating a RESTful Web Service with Spring Boot Chevron down icon Chevron up icon
Securing and Testing Your Backend Chevron down icon Chevron up icon
Setting Up the Environment and Tools – Frontend Chevron down icon Chevron up icon
Getting Started with React Chevron down icon Chevron up icon
Consuming the REST API with React Chevron down icon Chevron up icon
Useful Third-Party Components for React Chevron down icon Chevron up icon
Setting Up the Frontend for Our Spring Boot RESTful Web Service Chevron down icon Chevron up icon
Adding CRUD Functionalities Chevron down icon Chevron up icon
Styling the Frontend with React Material-UI Chevron down icon Chevron up icon
Testing Your Frontend Chevron down icon Chevron up icon
Securing Your Application Chevron down icon Chevron up icon
Deploying Your Application Chevron down icon Chevron up icon
Best Practices Chevron down icon Chevron up icon
Assessments Chevron down icon Chevron up icon
Other Books You May Enjoy Chevron down icon Chevron up icon
Index Chevron down icon Chevron up icon

Customer reviews

Filter icon Filter
Top Reviews
Rating distribution
Empty star icon Empty star icon Empty star icon Empty star icon Empty star icon 0
(0 Ratings)
5 star 0%
4 star 0%
3 star 0%
2 star 0%
1 star 0%

Filter reviews by


No reviews found
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.