Hello Web! Your first web application using Spring-Boot.
Want to get your first Spring Boot Web Application up and running? You have landed just at the right place. This blog is about to teach you how to write your first spring boot web application in a concise manner and short-and-sweet but to-the-point explanation. Lezz go!
Before jumping right into it and starting to write the code, this blog assumes that you are already familiar with the Java programming language and an expert in Spring Boot with 10+ years of professional experience. Just kidding, no prior experience with spring boot is required.
Tools required:
- Java Development Kit - download JDK version 11 that is compatible with your operating system and install it with default settings and configurations. For more information on how to add environment variable and path variable watch this video here.
- Visual Studio Code - download the VS Code editor that is compatible with your operating system and install it in your preferred location.
- Spring Boot Extension Pack - to work with spring boot applications in VS Code, we need some extensions.
- Maven - is a project management tool used for building and managing dependencies in our Java project.
If you’re having difficulties in setting up your development environment, then go ahead and read my previous blog where I have given a complete setup guide on how to set your windows laptop up for developing spring boot applications with this link.
All right, assuming you are ready with your development environment with everything set up as expected, we are good to go.
Creating your project:
Open VS Code and make sure that VS Code and all its extensions are running the latest updates. If you are low on internet, the least you could do is update only the spring boot extension pack which will help us creating Maven projects smoothly.
> Now press Ctrl + Shift + P (On Mac: Cmd + Shift +P). This should open a command palette with several options. Select - Spring Initializr: Create a Maven Project and hit enter.
> You should then be prompted to specify the Spring Boot Version for our project. Select 2.5 or anything greater than this and hit enter.
> The next thing you are asked for is the language that we are using to build this project, go ahead and select Java.
> For the Group Id, I’d say you leave the pre-entered Id i.e. com.example as it is and not to change it. (Explanation for Group Id given below)
> It should now prompt you to enter the Artifact Id. Type ‘hello-web’ and press enter. (Explanation for Artifact Id given below)
> To specify the packaging type, select JAR (short for Java Archive) and press enter. (Explanation for JAR given below)
> One important thing while specifying the Java Version in the next prompt is, you select the version that is compatible or corresponds to the version of JDK you have installed on your computer. Assuming you have been following this blog since the beginning, I’d say you select Java version 11. Selecting a version less than the pre-installed JDK version is still fine but do not select a number higher than your installed JDK version. hope that makes sense.
> The most crucial part in building up this project is selecting the right maven dependencies. These are important since they are the building blocks of any maven project. Selecting incorrect dependencies could break your project or including dependencies that are not required could make your application slow. Considering this is our very first and most basic project, we will be including only a single dependency called Spring Web. Type ‘Spring Web’ in the search box and select the option that has this description - “Build web, including RESTful, applications using Spring MVC……” and press enter twice.
> Go ahead and select the folder where you want this project to be saved.
> Ok, we’re done here. Our project is built and ready. Last thing that remains is to import our project folder into VS Code Workspace. At the bottom right, you should be prompted whether to include the project into workspace. Click ‘Include in workspace’ and select ‘Yes’ when prompted with trust folder.
Voila! You have successfully created a Spring Boot project using maven.
Just a fun fact - the project you just created is so self-reliant and independent that you can literally run this project with a single command and it would result in a web app on your browser. This is the beauty and power of Spring Boot. But hold your horses, we are not done yet.
Now, before we move ahead, let us first understand what is Group Id, Artifact Id and Java Packaging and get it out of the way:
Group Id - is a unique base-name or the domain of the company/organization that creates the project.
Artifact Id - a unique name that identifies the project.
Packaging - mainly JAR and WAR
a.) JAR - short for Java Archive, are zipped files containing the compressed versions of .class files and resources of compiled Java libraries and applications having the .jar extension.
b.) WAR - short for Web Application Resources, are archive files used to package web applications that we can deploy on any Servlet/JSP container and have a .war extension.
If you go through the hello-web project folder in the workspace, it might look a little overwhelming at first seeing all those different kinds of files and folders with weird names and extensions. Worry not, I’ll be explaining the project structure and why there are tons of files lying around in the folder. But this is a story for another blog. For today, we have a different aim and yet to be accomplished. Our only aim today is to start our own server and display the appropriate message on home page. So, without a further ado let's code this out.
Coding:
Open the HelloWebApplication.java file inside the com.example.helloweb package (hello-web > src > main > java > com > example > helloweb). By default, the code should look exactly like this (unless you changed the Group Id and the Artifact Id) -
Adding just a few lines of code, five to be precise, we will be done with our application and get this thing going. So, go ahead and modify this file with the code given below
Now that you are done with modifying the code, lets RUN it and see if we get the desired result. Press the Debug button.
This should open a terminal in VS Code with the following messages that should look something like this
Now, open your favorite browser (mine is Microsoft Edge by the way) and type localhost:8080 (or http://localhost:8080).
Congratulations on building your first web application. Go ahead and pat yourself on the back; you kept up with the entire blog and followed along with dedication. This might be underwhelming, but don't forget that you have come a long way and there’s a lot more ahead waiting for you.
Let's wrap it up. Shut the server down by clicking the stop button in the control panel in VS Code.
To make things easier, I have uploaded the project on my GitHub profile. You can easily clone the repository and import the project or just download the project as a zip file and start working on it.
Checkout the project and download as zip from GitHub with this link.
To clone the repository
$ git clone https://github.com/tabrezshaikh13/hello-web.gitIf you like this blog and find it helpful, definitely stay tuned for the next one where I will be explaining the maven project structure that is used in this application and also the code that we modified to meet our needs. We will also be modifying the code base further and play around with it a little bit and see what features does spring boot provides us with.
Having said that, I bring my article to an end and bid you adieu. Hope this article helps you in ways I intend it to.
Support my work by giving a clap to this blog and share it ahead with people who you think might find it helpful. Do let me know in the comments down below if you liked my writing. I am open to constructive criticism and suggestions on how I can improve my blogs and articles so that it helps convey my message in a better way. Thank you.
