Quick start of a web project
To develop a modern web application, you need to have skills both in creating the server side and the client side. The most common combination in the corporate environment lately is Java using the Spring Framework for the server and React for the client. However, not all developers have Full stack skills (knowledge in both the server and client parts), and for novice developers, creating such a configuration turns out to be quite an impossible task.
So, here is a ready-made solution that will allow you to learn how to create such configurations, as well as save time when starting a new project.
Let’s take a closer look at the technologies used
Server part:
Project build — gradle 4.8.1 (optional gradle-node-plugin for front assembly)
Language — Java 1.8 (or older)
Framework — Spring 5.x
Database — HSQL 2.3.1 (it will be enough for a start)
The client part:
Project Build — webpack 4.17.2
Language — JS6
Framework — react 16.4.0, redux 3.7.2, bootstrap (reactstrap 6.3.1)
If everything suits you, then you can continue.
Project launch
I think it will be much more fun if we run everything first and make sure everything works!
You can download the project from here
It will take quite a bit of time and patience to launch. The main thing is to do everything in order:
More detailed information on installation (at the request of readers) at the bottom of the article
Install java 1.8 (do not forget to register JAVA_HOME)
Install node.js
Open the command line (I hope that you will figure out how to do it yourself in your operating system)
Go to the project folder (For example cd C:\Git\react-start )
Execute the npm i command (This command will download all the dependencies for the front and put them in the node_modules folder)
Run the gradle build command (This command will assemble your project and put everything in the build folder)
Run the gradle bootRun command (Now your project is running)
It remains only to follow the link and enjoy the result.
You should see something like this:
Introduction
My main task in this article is to show the structure of the project. Therefore, I will basically tell you as much as possible which file in the project is responsible for what with some lyrical digressions. Back-end developers will be interested mainly in the client side and vice versa.
Project structure
I tried to remove everything superfluous from the project as much as possible, something that any project acquires over time, but scares novice developers.
To begin with, let’s look at what files we have in the project and why they are needed. We will break them again according to the purpose of the server and the client.
Server:
build.gradle is the main file for building our project. it describes all the dependencies we need and links to the repository where to get them. And also there is a gradle-node-plugin registered there, which automatically collects the front when assembling the server part, which is undoubtedly very convenient.
gradlew and gradlew.bat and gradle folder are the necessary parts to run the collector. By the way, if the gradle build command is not executed for some reason, then you may have to install gradle. You can do this using the official instructions.
README.md — A universal file for displaying project information in the repository.
There are two files in the src/main/webapp/WEB-INF/ folder jboss-web.xml and web.xml they are not used for local work, but if you need to run a project on WildFly type web servers, you will definitely need them.
application.yml is also not an unimportant file. It describes the Spring configuration. In particular, there is port: 8090 — the port on which the application will be launched and the database connection settings.
If you are already talking about databases, then the project uses HSQL — this is a file database running on java. At the start of the project, a db/ folder will be created in the user’s folder, in which the database itself will be stored. You can use any of your databases that you like best, for example Postgress, there are no fundamental restrictions on this.
The server-side code itself is located in the src/main/java folder.
Client:
.babelrc — all sorts of configurations for for babel are stored here. For those who don’t know, babel is a thing that converts all sorts of newfangled things in front—end development, such as JS6, JS7, JSX, into ordinary js. In this file, for example, I have a plug-in “plugins”: [“transform-decorators—legacy”] that allows you to use decorators – it’s like an @annotation in java. I haven’t used them, but you can. For this, everything is already configured, I checked.
.npmrc is a link to the repository for js dependencies.
package.json is a very important file that contains a description of our entire application, links to js dependencies and commands for building and running the client part. Moreover, the dependencies are divided into two parts: dependencies — dependencies that are necessary for the operation of the application itself and devDependencies — dependencies that are necessary for the assembly of the project. The scripts section describes the builds and start commands that are used to run only the front part of the project, for example, the front can be started with the npm run start command (It will start on port 9090). In fact, this file is an analog of build.gradle for the client part.
webpack.config.babel.js — the most important file in the entire configuration is the settings of the webpack collector. You can write a separate article about this, but I still want to go through the main parts of this file to form a general idea of its capabilities.
DevServer is used to develop the client side. As mentioned above, we can run our front on a separate npm run start port (it will start on port 9090). All changes in the js code will immediately take effect on this server. ContentBase is the root path to our application. If several applications are running on the server, then this is important. open: true — when the server starts, the application will automatically open in the browser. proxy is the section that is responsible for forwarding requests to the server part that we will have running on port 8090.