[Java] Build WebAPP development environment with Java + Spring with Visual Studio Code

1 minute read

Build a WebAPP development environment with Java + Spring with Visual Studio Code

In this article, I will explain how to build a Spring Web application development environment using VS Code. The procedure is as follows.

1. Java execution environment construction

If you haven’t done so already because VS Code requires Java execution environment as a prerequisite, please refer to the article Build Java program development environment with Visual Studio Code

2, Install advanced function

Open the extension search screen with Ctrl+Shift+x and search for and install the Spring Boot Extension Pack extension. image.png

3、Spring Maven project creation

Open the command palette in the order of Display -> Command palette in VS Code Shortcut key: Ctrl+Shift+P Enter spring: and select Spring Initializr Generate a Maven Project image.png

Select Java image.png

Enter the package name -> Enter image.png

Enter the project name -> Enter image.png

Select Spring Boot version image.png

Select the required dependencies for Spring Web application development here Since it is explained as a simple example in this article, add only Spring Web and Thymeleaf.

  • Add Spring Web image.png

  • Add Thymeleaf


After adding the above two dependencies, it becomes selecled 2 dependencies, click this Select destination image.png A Spring project named demo has been created



4, project implementation

Create Controller class in the package where XXApplication.java is In my case: src/main/java/com/example/demo/DemoApplication.java Select Package -> Right Click -> New File -> DemoController.java -> Enter image.png

DemoController class is created image.png Edit the contents of DemoController.java


Create HTML file under resources/templates Right click on templates -> New file -> index.html -> Enter image.png

Edit the contents of html appropriately Example: If you want to create HTML using bootstrap4, refer to How to write html + bootstrap4 with Visual Studio Code image.png Open screen: http://localhost:8080 image.png The index method of the control class is called, and the contents of index.html are displayed on the screen. With this, the construction of Spring Web development environment is successful.

the end

In future articles, I will write about DB connection, adding other dependencies, editing design files, etc.