DEV Community: Arpan Banerjee

Run React Frontend and SpringBoot Backend on the same port and Package them as a single artifact !!

Arpan Banerjee — Sat, 10 Apr 2021 19:02:01 +0000

Find out how to combine create-react-app with Spring Boot to give you a single artifact.

Hey there! I am a full stack developer with 3+ years of experience based out of West Bengal, India. Today I will walk you through a setup trick to prepare your project structure for running react and spring boot app on the same port, and package them as a single artifact. You will see how easy this can make development when dealing with both of these game-changing technologies.

Here is the GitHub link of the demo that I am going to explain here.

Advantages of this setup

Combines the ease of development of both create-react-app and Spring Boot.
You can use the hot reload feature of create-react-app while developing the frontend, save the page after making changes and it will reflect immediately on the browser.
Using Spring Boot you can easily manage your development versions (using SNAPSHOTs) and release versions in production. You can detect build version and time at runtime in Spring Boot using Spring Actuator or Spring Admin, which can provide the build metadata functionality plus a lot more.
Package Frontend and Backend in a single war/jar file with optimized production build.

I learned this in one of my recent projects. It has several spring boot microservices with react frontend packaged and deployed as single artifacts of their own.

So, here is a quick guide how to run a react frontend and a spring boot backend on the same port and how to package them as a single jar file.

First, create a spring boot project with https://start.spring.io. Add the Web dependency. Set the groupId and artifactId to whatever you want. Generate the project and unzip it into your project directory.

Or, if you are using Spring Tools Suite you can simply click
File->New->Spring Starter Project and mention the required details to create a spring boot project.

Your initial pom.xml should look like this.

The project structure should look like this.

You can run the app now and see if it runs without any errors.
Though you won't see anything if you hit http://localhost:8080/.

Now, go to src/main/resources, create a static folder. Inside it create a test.html file with some text in it.

Now, if you restart the application and hit http://localhost:8080/test.html you will see it spins up your html page in port 8080. You can see the contents of your file in the browser.

Serving the React App from Spring Boot on port 8080 and Packaging them together

We will exploit the above mentioned feature of Spring Boot to serve the single page of the react project. We will serve a html page from the static folder in the target directory, not in the source directory.

Now let's create a react app, using create-react-app. Navigate to your folder till src/main in a terminal
D:\Codes_projects\springboot_react_maven_plugin\Spring_React_maven-plugin\src\main> and run npx create-react-app frontend.

This should create a react app inside src/main. Now if you look at your folder structure it should look like this.

You can run the react app, by doing cd frontend and then yarn start or npm start. It should spin up the react app on http://localhost:3000.

You can create a production build of the frontend by running yarn build. Your folder structure after running the build command will look like this.

You need to copy this production build place it inside the target/classes directory of your project to enable Spring Boot to serve this index.html when you start your project

So, there are two steps-

create a production build of the frontend
copy the production build into ${target/classes/}

Of course you are not going to do that manually.
We we will use two maven plugins for that.

frontend-maven-plugin for step 1.
maven-resources-plugin for step 2.

Add the following to your pom.xml under the plugins section and update the properties section as shown.



   <properties>
        <java.version>1.8</java.version>
        <frontend-src-dir>${project.basedir}/src/main/frontend</frontend-src-dir>
        <node.version>v14.15.4</node.version>
        <yarn.version>v1.16.0</yarn.version>
        <frontend-maven-plugin.version>1.7.6</frontend-maven-plugin.version>
    </properties>



           <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>${frontend-maven-plugin.version}</version>

                <configuration>
                    <nodeVersion>${node.version}</nodeVersion>
                    <yarnVersion>${yarn.version}</yarnVersion>
                    <workingDirectory>${frontend-src-dir}</workingDirectory>
                    <installDirectory>${project.build.directory}</installDirectory>
                </configuration>

                <executions>
                    <execution>
                        <id>install-frontend-tools</id>
                        <goals>
                            <goal>install-node-and-yarn</goal>
                        </goals>
                    </execution>

                    <execution>
                        <id>yarn-install</id>
                        <goals>
                            <goal>yarn</goal>
                        </goals>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>

                    <execution>
                        <id>build-frontend</id>
                        <goals>
                            <goal>yarn</goal>
                        </goals>
                        <phase>prepare-package</phase>
                        <configuration>
                            <arguments>build</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

Now if you run mvn clean install from D:\Codes_projects\springboot_react_maven_plugin\Spring_React_maven-plugin> maven will install npm, yarn and node locally and run npm build in the frontend directory.

The folder structure would look like this-

Now, add the second plugin to your pom.xml.



          <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <executions>
                    <execution>
                        <id>position-react-build</id>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <phase>prepare-package</phase>
                        <configuration>
                            <outputDirectory>${project.build.outputDirectory}/static</outputDirectory>
                            <resources>
                                <resource>
                                    <directory>${frontend-src-dir}/build</directory>
                                    <filtering>false</filtering>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

Add the following dependency in the dependencies section.



       <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

Modify the spring-boot-maven-plugin to include a configuration section.



          <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>

This will ensure that the frontend build files are copied after they have been generated by yarn build.
Now, run mvn clean install again and inspect the target/classes/static directory from your file manager.

It will have the frontend production build files in there.

Your final pom.xml will look like this.



<?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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.2</version>
        <relativePath /> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.springreact</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo</name>
    <description>Run React Frontend and SpringBoot Backend on the same port.</description>
    <properties>
        <java.version>1.8</java.version>
        <frontend-src-dir>${project.basedir}/src/main/frontend</frontend-src-dir>
        <node.version>v14.15.4</node.version>
        <yarn.version>v1.16.0</yarn.version>
        <frontend-maven-plugin.version>1.7.6</frontend-maven-plugin.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId> 
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>${frontend-maven-plugin.version}</version>

                <configuration>
                    <nodeVersion>${node.version}</nodeVersion>
                    <yarnVersion>${yarn.version}</yarnVersion>
                    <workingDirectory>${frontend-src-dir}</workingDirectory>
                    <installDirectory>${project.build.directory}</installDirectory>
                </configuration>

                <executions>
                    <execution>
                        <id>install-frontend-tools</id>
                        <goals>
                            <goal>install-node-and-yarn</goal>
                        </goals>
                    </execution>

                    <execution>
                        <id>yarn-install</id>
                        <goals>
                            <goal>yarn</goal>
                        </goals>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>

                    <execution>
                        <id>build-frontend</id>
                        <goals>
                            <goal>yarn</goal>
                        </goals>
                        <phase>prepare-package</phase>
                        <configuration>
                            <arguments>build</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
            <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <executions>
                    <execution>
                        <id>position-react-build</id>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <phase>prepare-package</phase>
                        <configuration>
                            <outputDirectory>${project.build.outputDirectory}/static</outputDirectory>
                            <resources>
                                <resource>
                                    <directory>${frontend-src-dir}/build</directory>
                                    <filtering>false</filtering>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>

Now you are ready to go! Run the project and go to http://localhost:8080/index.html VOILA!! You have run your React app via Spring Boot.

Taking a step further

You can add rest controllers and expose an endpoint to be the starting point of the application. Like an Index Controller , whenever the application loads, spring boot will spin up the index.html file having the static contents from the optimized build of the frontend project from the target directory. So that you can simply visit http://localhost:8080 and not hardcode the index.html file name.

Let's do that.
Add a controller, in the following folder structure.



package com.springreact.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class IndexController {

    @GetMapping("")
    public ModelAndView home() {
        ModelAndView mav=new ModelAndView("index");
        return mav;
    }

}

Run your application and hit http://localhost:8080/.
Did you see anything? No, right!

You have to add another dependency for this to work.



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

Now, by default thymleaf looks for our templates in src/main/resources/templates. We can put our templates there and organize them in sub-directories and have no issues.

So, let's try that. Add a html file inside src/main/resources/templates named index.html and put some content in it.

Run the application and visit http://localhost:8080. You will see the index.html from src/main/resources/templates being served in port 8080.

Now, to change this default behaviour and make thymleaf serve static content from another location, you need to add an entry to the application.properties file.



spring.thymeleaf.prefix=file:///D:///Codes_projects//springboot_react_maven_plugin//Spring_React_maven-plugin//target//classes//static/

Here, I have hardcoded the path.

Finally, now if you update your project and start it. You can see the react app being served directly on port 8080.

Conclusion

You have learned how to use spring boot to run a react app. You can run both your frontend and backend on the same port. I have explained what you need to do to get the setup done. You can now create a meaningful application, and see how easy and quick it is to develop with this setup. You can now run the frontend application using React-scripts by running cd frontend; yarn start, and develop using the hot reload feature of create-react-app and have meaningful error messages, while being able to deploy the application to test and production environments as a single artifact.

Thanks for reading!

Please leave a comment if you find this helpful. Any feedback or suggestions are welcome.

Entry Components Vs Declarations in Angular

Arpan Banerjee — Fri, 19 Jun 2020 10:24:08 +0000

Breaking down the differences when you are dealing with Angular components

Hi! I am a full stack developer based out of West Bengal, India. I love digging deep into the trickier parts of the technologies. Here is one from my vault. Hope this helps you.
Without further ado, let us dive straight into it.

For this you need to understand how angular actually works behind the scenes when it comes to creating components.

Any component as well as directives and pipes you plan on working with, you need to add them to your declarations array in @NgModule of app.module.ts(while working with multiple modules, we import the feature module in our app.module.ts imports array, and that feature module has all the components in its declarations array).

The above mentioned step is important for angular to understand what's a component or which components and directives you have in your app because, it does not automatically scan all your files. You'd need to tell it which components exist, after creating a new component.

Still this alone only makes angular aware of it so that it is able to create such a component when it finds it in one of two places--

The first place would be in your templates if in your templates angular finds a selector of a component--> then it basically looks into the `declarations array for that particular component-->finds that there and then is able to create that component.
The other place where angular will look for this component is in your routes in your rout config--> when you point at a component there angular will also check that in the declarations array and--> if it finds that there it is able to create such a component and load it.

Now one place that does not work by default is when you want to create a component manually in code. Like when you want to create a dynamic component with component factory like an alert component maybe which only shows up when there is any error and you neither mention the selector of it in any template nor in the rout configuration.

And now, here angular does not automatically reach out to the declarations array. It simply doesn't do that. You can complain about that. Still it's the case.

You instead deliberately need to inform angular that in this case the alert component will need to be created at some place and that angular basically should be prepared for this.

Generally angular will prepare itself for this creation when it finds a component in the template or in a rout configuration.
But in our case as we haven't done either of the two things as mentioned above, angular won't prepare itself.

Now to tell angular to be prepared for the creation of that component you need to add a special property to the object you pass to @ngModule besides declarations import and so on. That property is entry components, it is an array of component types, but only those components that will eventually be created without routs or selectors.

But with the launch of Angular 9, there were changes made behind the scenes, and it does all these work for you, you do not need to mention the entry components manually anymore.

I hope this clears some doubt regarding the entry components and declarations and how angular application works when it comes to deal with your components. Here is the link to my stackoverflow answer.

Credits--Learned these concepts from the Udemy course "Angular the Complete Guide" -by Maximilian Schwarzmüller .

Thank you, for reading!

FileInputStream vs FileReader in Java

Arpan Banerjee — Thu, 11 Jun 2020 14:25:19 +0000

To understand this thoroughly you need to understand what is character stream and what is byte stream, so let's have a quick look at that.

Byte Streams

A byte stream access the file byte by byte. Java programs use byte streams to perform input and output of 8-bit bytes. It is suitable for any kind of file, however not quite appropriate for text files. For example, if the file is using a unicode encoding and a character is represented with two bytes, the byte stream will treat these separately and you will need to do the conversion yourself. Byte oriented streams do not use any encoding scheme while Character oriented streams use character encoding scheme(UNICODE). All byte stream classes are descended from InputStream and OutputStream .

Character Stream

A character stream will read a file character by character. Character Stream is a higher level concept than Byte Stream . A Character Stream is, effectively, a Byte Stream that has been wrapped with logic that allows it to output characters from a specific encoding . That means, a character stream needs to be given the file's encoding in order to work properly. Character stream can support all types of character sets ASCII, Unicode, UTF-8, UTF-16 etc. All character stream classes are descended from Reader and Writer.

If you try to read from a .txt file which has been written with Uni-8 encoding which is by default used in java,then reading the file with both Reader and InputStream classes will give the same output.As here each byte represent one character.

I have created few methods which will help you understand the difference between these two terms--
FileInputStream reads byte by byte
FileReader reads char by char.

Let's dive deeper into these concepts with examples.

Now that you have got an idea about these two streams lets look at the examples to understand how it works internally.

Method to write a some data in a file using Unicode 16 encoding

The output.txt file will contain Hello World in it.

These are the 3 ways of reading from the file first using FileReader the default way, then using FileInputStream and then using InputStreamReader with Unicode-16 charset(encoding).

The comments in the methods are self explanatory please read them to get a clear understanding how it works.

FileReader

The output will be Output of FileInputStream reading byte by byte : þ

FileInputStream

The output will be Output of FileInputStream reading byte by byte : þ

InputStreamReader

The output will be uni-16 ISR: H

So using InputStreamReader we can read the file.

Hope this clears up some doubt on how Java IO works.

Here is the link to the stackoverflow discussion , you can find my answer there as well.

Thank you or reading :)

If you have any question regarding this or anything I should add, correct or remove, feel free to comment, email or DM me. Thanks once again !!