Beginners create Spring Tools Suite environment with VS Code

Purpose

For studying because I'm likely to make friends with WEB API using Spring Boot in business Create Spring tool suite 4 development environment in windows10 environment. Let's make a sample site for the time being.

So, we will build the current latest (2019/12/24) "Spring Tools Suite 4" environment. The officially supported IDEs are "Eclipse", "VSCode", and "Atom", and this time we will build with VSCode.

Development environment construction

Installation

Install JDK / MAVEN / VS Code. SpringToolsSuite (STS) seems to have to be JDK 1.8 or higher, so Java 8 is installed. For MAVEN and JDK, you will need the installation path later, so I personally recommend dropping the compressed file and extracting it in an easy-to-understand place.

JDK

• Olacle-Java SE Download
• Download Red Hat Open JDK MAVEN
• Apache Maven Project VSCode -Visual Studio Code-Code Editor | Microsoft Azure

This time it is arranged like this

D:/
├── JDK
|   └── jdk-8.0.232.09-hotspot
└── maven
    └── apache-maven-3.6.3

Environment variable settings

Pass the path to the folder where you extracted JDK and MAVEN. In Control Panel ⇒ System ⇒ Advanced System Settings ⇒ Environment Variable Settings

1. Add the "JAVA_HOME" and "MAVEN_HOME" items to the system environment variables (the path of the folder you unzipped earlier).
2. Add "% JAVA_HOME% \ bin" and "% MAVEN_HOME% \ bin" to the "Path" item of the system environment variable.

• If you understand, this is fine

JAVA_HOME="D:/openjdk/jdk-8.0.232.09-hotspot"
MAVEN_HOME="D:/apache-maven-3.6.3"
Path=%JAVA_HOME%\bin;%MAVEN_HOME%\bin;%Path%

Installation of plugins

Install the following on the VS Code add-on search screen. Spring Boot Extension Pack Java Extension Pack

Environment variables in VS Code

The VS Code plugins start to get angry, "Where is Java?", So I'll tell you the path you installed there as well. File ⇒ Basic settings ⇒ Settings ⇒ Add the following description to the setting file opened with the icon (Open Settings (JSON)) on the upper right.

{
  "java.home": "D:\\openjdk\\jdk-8.0.232.09-hotspot",
  "maven.executable.path": "D:\\apache-maven-3.6.3\\bin\\mvn", //I want to know where the maven executable is also
  "maven.terminal.useJavaHome": true //Instruct maven to look at the Java path
}

* If you are in a proxy environment

The installation has been completed so far, but if you are using a proxy in-house, you may get the necessary libraries when creating a project and an error may occur. In that case, perform the following procedure. ** Addition to setting.json **

{
  "http.proxy": "{Proxy server URL}:{port number}",
  //If it's a proxy environment, I'll specify where VS Code will download the library.
}

** Creating settings.xml ** Create a "settings.xml" file in "C: /Users/{username}/.m2" to allow maven to use the proxy.

settings.xml

<settings xmlns="http://maven.apache.org/SETTINGS/1.0.0"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0
                          http://maven.apache.org/xsd/settings-1.0.0.xsd">
  <localRepository/>
  <interactiveMode/>
  <usePluginRegistry/>
  <offline/>
  <pluginGroups/>
  <servers/>
  <mirrors/>
  <proxies>
   <proxy>
      <id>{A string that can be a unique ID}</id>
      <active>true</active>
      <protocol>http</protocol>
      <host>{Proxy server URL}</host>
      <port>{port}</port>
    </proxy>
  </proxies>
  <profiles/>
  <activeProfiles/>
</settings>

How to make a project

1. Open the folder where you want to create a project in VS Code
2. Open the command with "Shift + Ctrl + p" and "Spring Initializr: Generate a Maven Project"
3. "Java" ⇒ "" ⇒ "" ⇒ " (2.2.2 this time)" ⇒ "dependency selection (s)"
4. Select a project creation folder

Select the following three dependencies

1. Spring Boot Dev Tools (Hot Reload function)
2. Spring Web (template for creating WEB services with Spring)
3. Thymeleaf (HTML template engine)

Try to run

Open your project in VS Code (or include it in your workspace)

When you open VS Code again in the created project folder, You can see that it recognizes the projects created by Java, Maven, and Spring Boot.

• If you do not recognize it here, it seems that something is missing. Check the above settings and restart VS Code is recommended.

Add sample page

Add the file to the path below.

\src\main\resources\templates\hogehoge.html(HTML to display)
\src\main\java\com\hogehoge\test_project\controller\HogehogeController.java(Routing controller)

HogehogeController.java

package com.hogehoge.test_project.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class HogehogeController {

    @RequestMapping("/hogehoge") //Specify the URL here.
    public String hogehoge() {
        return "hogehoge"; //HTML with the same name as the character returned here is called.
    }
}

hogehoge.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>hogehoge</title>
</head>

<body>
    <h1>HelloWorld</h1>
</body>

</html>

Can be executed with "SPRING-BOOT DASH BOARD" at the bottom left