• April 14, 2024

The structure of the code for launching a web project

In the project, for example, I made the connection of the client and server parts via Rest and WebSocket. Who likes what more. There are a great many descriptions of the Spring Framework and Rect technologies themselves on the Internet. This article is for those who have something that doesn’t work out, or something is lazy. This is a customized ready-made working solution containing everything you need to grow into a full-fledged large project.

You can also take this project as a starting point in learning Java EE or React applications.controller/RestController.java

Server:

The client part code is located in the src/main/java folder.

The way everything is located there is completely subordinated to the Spring Framework structure. For those who are familiar with it, they will not find anything interesting there, and for those who are just starting, again, I will just briefly go through the files.

Main.java is the main file. Contains the main method, which launches the entire application.

configuration/WebSocketConfig.java — for entry points when working via WebSocket

Controllers are classes responsible for the interaction of the server and client parts.

controller/IndexController.the java controller is responsible for displaying our client part. Redirecting the user to the url application/** (This is the contextual path to our application)

controller/RestController.java — as the name suggests, this controller is responsible for data exchange between the client and server parts over Rest. Abstract @RequestMapping(value = “/api/rest”, method = RequestMethod.GET) says that upon request at /api/rest, the server will give us a list of users.

I used the PUT method to add users and DELETE, respectively, to delete a user by ID.

controller/WebSocketController.java — defines the path for data exchange via WebSocket. The getAndSendMessage method receives a message from the client and sends it back.

Services are usually responsible for the logic of our application.

service/ORMUserService.java — in my case, is responsible for creating a list of users, as well as adding and deleting users to the database using the parameters received from the client part as data. To delete a user, this is the user ID, and to create it, this is the user’s name, role, and password.

Domain classes are classes that most often contain only data that is projected onto tables in the data bus. From the logic that can be contained in these classes, it is checking the data for correctness or some actions that must be performed immediately before writing data to the database or after reading from it. For example, you can convert from kilograms to grams.

domain/User.java class that will correspond to the Table Table(name = “USER”) in the database.

Data for the column @Column(name = “ID”) will be generated automatically.

domain/Message.java — in my case does not use database mappings. the data in it will be stored while the application is running. It serves me for generating messages sent via WebSocket.
That’s all I have with the server part.

Client:

I will not focus on the client side, since React itself is still a fairly young technology. And it has not yet finally formed the best practices that should be used in each specific project. I will only note that I have created the most classical structure as convenient as possible in my opinion for studying.

What has been done at the front:

The main layout of the application and several tabs are implemented.
Implemented translation for the entire application.
Implemented the state of the application on Redux.
Implemented the display of the table of users received from the server via Rest
Implemented the removal of users by id
Implemented the addition of users
Implemented sending and receiving messages via WebSocket

I think this is more than enough to start with.

Conclusion

Leave all your questions and suggestions in the comments or email me. I will be glad to help.

Detailed installation and startup information

OS “Wondows 10”
Installing Java 1.8 detailed instructions

Before starting the installation, press the Win+ R keyboard shortcut and enter cmd
, enter java -version and see

This means that java is not installed on this computer.

If the computer has output the java version and this version is not lower than 1.8, then proceed to the Gradle installation point.

Download Java from the link

You need to click the Accept License Agreement checkbox.

The Windows x64 version we need

Downloading java

Launching

Starting java

Click Next all the time and Ok at the end of close.

After installation, we call the Win+R command line again and enter cmd, enter java -version and see the version of Java we have already installed

Open the properties of your computer

Computer Properties

Additional parameters — environment variables

Environment variables

Make sure that the system variables have JAVA_HOME with the value C:\Program Files\Java\jdk1.8.0_181\

JAVA_HOME

And there is a string in the Path variable C:\Program Files\Java\jdk1.8.0_181\bin

Path

Let’s move on to the next point

Gradle installation detailed instructions

Open the console again and enter gradle -version
Since we have not installed it yet, we will see by this:

Download the archive from the link

We unpack for example into such a folder C:\gradle-4.10.1

Next, by analogy with java, we open the section with system variables and independently add the GRADLE_HOME variable with the value C:\gradle-4.10.1\bin

GRADLE_HOME

And we also add to the path variable C:\gradle-4.10.1\bin you can even next to the line C:\Program Files\Java\jdk1.8.0_181\bin, but it’s not necessary.

gradle path

Be sure to restart the Win+R cmd console and enter gradle -version

Everything is now and gradle is installed!

Node JS detailed instructions

Download Node JS from the link

And install
Installing Node js

Restart the command line and enter npm -version and we will definitely see the installed version

Project launch

Excellent all the preparatory work is done

Download the project as an archive

It weighs only 135 Kb

Git

And unpack in C:\react-start-master\

Project Folder

Run the command line and go to C:\react-start-master\
For those who do not remember to climb up the folder tree in the command line, you need to enter cd..

So we go to the root of the C drive:>
Then we enter cd react-start-master and get the path C:\react-start-master>

enter npm i

Currently, JS dependencies are being downloaded for our project

Warnings are allowed (WARN — warning)
The folder C will appear in the software project:\react-start-master\node_modules all dependencies will be in it.

Immediately after that, we enter gradle build in the console

All dependencies for Java, including Spring, will be downloaded.
The C folder will appear in the project:\react-start-master\build

everything will be assembled and we will see a message about a successful assembly
BUILD SUCCESSFUL

And immediately after that, you can run the gradle bootRun command

The project will start launching

At the end of the launch, the console will have something like the following

All the project is running!

Don’t close the console, just collapse it.

Open a browser and type localhost:8090/application/ or follow this link

You will see the project running