Open in app

Sign in

Write

Sign in

Spring Boot and React JS Fullstack Application.

Tafadzwa L Nyamukapa
The Startup

--

Full-stack application with Spring boot and React js, with WEBPACK & BABEL. JUNIT Tests , RESTful API.

(You can checkout the youtube series here)

1. Spring Boot (Initializer)

To start off with you can use Spring Initializer to get the Spring Boot project structure for you, and this can be found here

Once you get there in this case im using Maven , and that’s my personal preference over Gradle since it gives a nice xml layout for your setup , in terms of installing dependency , plugins etc. its essentially a tool for your project management, just like package.json for those who are familiar with node js.

You also need to add a couple of dependencies which are

  • JPA — Data persistence in SQL stores with Java Persistence API
  • thymeleaf — A modern server-side Java template engine
  • WEB — Build web, including RESTful, applications using Spring MVC
  • H2 — Provides a volatile in-memory database
  • Lombok — Java annotation library which helps reduce boilierplate code

2. Rest API Service

a. models

Now lets create the REST API service for the backend application which will be able to perform basic CRUD (Create, Read, Update ,Delete) functionality.

First create a package named models. Inside models create class User for your user model. See code below

First you will notice the @Entity annotation- this tell Spring that it is a JPA entity and it is mapped to table named User. If you want to the the table name you will have to annotate it with @Table(name = “new_table_name_here”) You probably noticed that this is too much of code to create an entity not to worry, Remember the Lambok dependency this is the best time to use it since it offers a functionality of writing code with less boiler plate of code.

In the above snippet you will notice we have added a couple of annotations @Data — is a convenient shortcut that bundles features of @toString, @EqualsAndHashCode, @Getter / @Setter and @RequiredArgsConstructor . @NoArgsConstructor provides the default construct @AllArgsConstructor bundles the non default constructor.

b. repositories

Lets create a repositories package with an interface called UserRepository. The interface extends the Jpa repository so that we can have all methods that are provided by the JpaRepository which allows us to query our database.

c. controllers

Now that you got your repository setup, its time to create a controllers package and with a class called UserController. The is where the REST service with Spring begins. The controller will save all end points of our user controller, which will then be consumed by the outside world. All the request features required by our CRUD app are going to seat here i.e GET, POST, PUT and DELETE requests. See code below:

In the above code the class is annotated with @RestController telling Spring that the data returned by each method will be written straight into the response body instead of rendering a template. The UserRepository is injected by constructor into the controller. The @Autowired enable automatic dependency injection.

The @PostMapping , @GetMapping, @PutMapping and @DeleteMapping corresponds to the POST, GET, UPDATE and DELETE actions. One thing to note here is the @DeleteMapping and @GetMapping which is calling a ResourceNotFoundException class that will output the runtime exception.

Lets quickly implement the ResourceNotFoundException class.

d. exceptions

I like to keep my code clean and packaged. So just quickly create a package called exceptions with a class ResourceNotFoundException. See code below:

The above class extends the RuntimeException which will give us access to all methods that are in that class. In this case just call super in the constructor with message variable. That’s it .,now whenever a user is not found it will return the run time exception with user not Found message and status of HttpStatus.NOT_FOUND.

e. database

  • NB Since we have added the H2 in -memory DB . Spring automatically runs it whenever there is persistence to the db. Please note that H2 Database is volatile meaning it will be automatically be created when the server ran and whenever you stop the server it will tear down the db and its contents. By default, Spring Boot configures the application to connect to an in-memory store with the username sa and an empty password. However, we can change those parameters by adding the following properties to the application.properties file:
spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=
spring.jpa.database-platform=org.hibernate.dialect.H2Dialect
# Enabling H2 Console
spring.h2.console.enabled=true

# Custom H2 Console URL
spring.h2.console.path=/h2
# Whether to enable remote access.
spring.h2.console.settings.web-allow-others=true

server.error.include-stacktrace=never

f. REST API TESTING(JPA UNIT TESTING)

Now that everything is setup its time for the truth to be reviewed. I like to do things differently so instead of testing our API using Postman im going to do JPA Unit testing. If you are familiar with JPA Unit Testing feel free to test with Postman or jump to next section (INTEGRATING REACTJS)

Now to get things started quickly install JPA Unit testing dependency in your pom.xml file.

<dependency>
    <groupId>junit</groupId>
    <artifactId>junit</artifactId>
    <scope>test</scope>
</dependency>

In your test/java/com.<application-name>/ create a file class UserTests with the following testing code:

The @DataJpaTest tells Spring to test the persistence layer components that will autoconfigure in-memory embedded H2 database and scan for @Entity classes and Spring Data JPA repositories. We need to autowire the UserRepository so that we will have functions provided by the JPA to be able to query our DB. Spring will look for function annotated with @Test. The JUNIT ASSERT i going to assert most of the tests.

In your terminal You can now run :

mvn test

If everything runs well you should have an output similar to this:

[INFO] 
[INFO] Results:
[INFO] 
[INFO] Tests run: 5, Failures: 0, Errors: 0, Skipped: 0
[INFO] 
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 11.845 s
[INFO] Finished at: 2020-09-08T19:01:25+02:00
[INFO] Final Memory: 32M/370M
[INFO] ------------------------------------------------------------------------

NB At this point of your test runs successfully congratulations you have made it :) . Now you can jump in to the next section ie (INTEGRATING REACTJS)

3. INTEGRATING REACTJS

Now lets jump in to the frontend of things of our fullstack application.

In this section i am assuming you have already installed nodejs in your working environment. If not just quickly install link can be found here

We are not going to use npm create-react-app to create our frontend since we dont want to separately run the react js application with its own proxy port usually port 3000. We want our Spring backend application to be able to serve the front at its default port 8080, that way we get to experience the fullstack of things without having to separately running two instances servers for our front end and backend application.

Now you can prepare the react js project structure by creating these folders in your root folder of your application.

$ mkdir -p ./frontend/src/{components,actions,reducers}

The above command will create a folder structure that look like this:

frontend/
  src/
    actions/
    components/
    reducers/

This is were your react frontend application is going to seat in.

3a Installing packages

We now need to create a package.json file which will have all your dependencies that is going to be used by reactjs framework. To create the package.json file just run

$ npm init -y

Since you have already installed node this npm command should run just fine, and you now should be able to see the package.json file in your root folder of your project.

Now at this point you now need to install the following Dev Dependencies and Dependencies for your react .

$ npm i -D webpack webpack-cli
$ npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties
$ npm i -D sass-loader css-loader
$ npm i react react-dom react-router-dom
$ npm i redux react-redux redux-thunk redux-devtools-extension
$ npm i redux-form
$ npm i axios
$ npm i lodash

This will install the Dev Dependencies required by react js .

  • webpack — will bundle Javascript files for usage in a browser
  • babel — is a transpiler ie a Javascript compiler used to convert ECMAScript 2015+ code into a backwards compatible version of Javascript in current and older browser environments.
  • react — Javascript library for building user interfaces. Developed by facebook
  • redux — The is a predictable state container for Js apps
  • axios — Promise based HTTP client
  • lodash(optional) — Lodash is a reference library made with JavaScript.

3b Babel Configuration

Add a file named .babelrc to the root directory and configure babel:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

3c. Webpack Configuration

Add a file named webpack.config.js to the root directory and configure webpack:

“””Quote Spring Docs””” This webpack configuration file:

  • Defines the entry point as ./src/main/js/App.js. In essence, App.js (a module you will write shortly) is the proverbial public static void main() of our JavaScript application. webpack must know this in order to know what to launch when the final bundle is loaded by the browser.
  • Creates sourcemaps so that, when you are debugging JS code in the browser, you can link back to original source code.
  • Compile ALL of the JavaScript bits into ./src/main/resources/static/built/bundle.js, which is a JavaScript equivalent to a Spring Boot uber JAR. All your custom code AND the modules pulled in by the require() calls are stuffed into this file.
  • It hooks into the babel engine, using both es2015 and react presets, in order to compile ES6 React code into a format able to be run in any standard browser.

With this webpack configuration file setup we now need to create a couple of directories.

3d. React boiler plate Setup

  1. Notice how the above webpack is referencing to ./src/main/js/App.js . Lets create a js folder in main and an App.js file inside The App.js file should have this following code:
  1. Now we now need to prepare the html that will render the App.js we just created in Spring

Remember the Thymeleaf dependency we installed at the beginning in the Spring Initializer it time to get that to use To get started you need to create an index page in src/main/resources/templates/index.html

The key part in this template is the <div id="app"></div> component in the middle. It is where you will direct React to plug in the rendered output.

The bundle.js will automatically generated when we run our application.

Spring will automatically know that the main.css file will be created under the static folder in your resources folder so go ahead and create it will use it later.

With that set up you should have the Final project structure now looking to something like this:

- frontend
- sample-project-root
    - src
        - main
            -java
            - js
                App.js
                index.js
            - static
                main.css
            - resources
                - templates
                    index.html
 webpack.config.js
 package.json
 pom.xml

If this is you project string you are good to go and now left with one last step to test this out.

3e. Script Setup in package.json

In the package.json file we need to finally replace the script tag with the following

...
 ...
"scripts": {
    "watch": "webpack --watch -d --output ./target/classes/static/built/bundle.js"
  },...
...

This will run the webpack and tell it to render the output (bundle.js) to ./taget/classes/static/built/ folder. The — watch tag will tell the webpack to constantly watch for changes in our code so that when there is such it will update the bundle.js file.

3f. Final Setup Step

Remember when we create our UserController it had a @RestController annotation to serve the rest methods in that class. If can still recall we said the @RestController tells Spring that the data returned by each method will be written straight into the response body instead of rendering a template. Now we need an endpoint that will render a template. S So lets create a separate class in our controllers called WebMainController which will render the index page of our react App.js main component.

4. FINAL TEST

Now lets test the full stack application First run your server

$ mvn spring-boot:run

If there are no error you are good it means we haven’t messed anything up since our last JUNIT TESTS. Finally transpile your react app by running:

$ npm run-script watch

Now you can go to you browser http://localhost:8080/ and if this appears on your browser:

Welcome to React Front End Served by Spring Boot

Then you have successfully integrated react js and spring boot Full stack application. If you make changes in your app webpack should be able to update those changes, and all you have to do is to restart your browser.

I know this was a long tutorial I will make it in parts. Part 2 of this series is now available here. So that you will now Learn React.

Thank you for taking your time in reading this article.

!!END

Source Code

The source code can be found on my git repository here

Pull Requests

I Welcome and i encourage all Pull Requests

Created and Maintained by

License

MIT Licence

--

--

Tafadzwa L Nyamukapa
The Startup

Written by Tafadzwa L Nyamukapa

104 Followers
Writer for

Software Engineer with a huge passion for building software and explore new technologies. FinTech | CKA | Java | Django | AI | Js | System Architect | Cloud