Merge branch 'master' of https://github.com/OtusTeam/Spring

2026-05-30 10:50:42 +00:00 · 2023-06-03 13:28:34 +02:00
parent 9592178e16 f3778ee3e0
commit 6e60ea8191
30 changed files with 954 additions and 0 deletions
@@ -0,0 +1,90 @@
+<!DOCTYPE>
+<html>
+<head>
+    <title>Технологии JS для отправки запросов</title>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
+    
+    <script>
+        function outputCharacter(character) {
+            const dataContainer = document.getElementById("dataContainer")
+            const characterPhoto = document.getElementById("characterPhoto")
+            dataContainer.innerHTML = JSON.stringify(character, undefined, 4)
+            characterPhoto.src = character.image;
+            
+        }
+    </script>
+    
+    <script>
+        function getDataByXmlHttpRequest() {
+            
+            
+            const xhr = new XMLHttpRequest();
+            xhr.onreadystatechange = () => {
+                if(xhr.readyState === 4 && xhr.status === 200) {
+                    // Вот здесь придёт ответ
+                    const json = JSON.parse(xhr.responseText)
+                    outputCharacter(json)
+                }
+            } 
+            // Вот здесь запрос отправляется
+            xhr.open('GET', 'https://rickandmortyapi.com/api/character/1')
+            xhr.send()
+        }
+    </script>
+        
+        
+    <script>
+        function getDataByJQuery() {
+            $.ajax({
+                type: 'GET',
+                url: 'https://rickandmortyapi.com/api/character/2',
+                success: (json) => {
+                  // Вот здесь пришёл ответ
+                  outputCharacter(json)
+                }
+              })
+        }
+    </script>
+        
+    <script>
+        function getDataByAxios() {
+            axios.get('https://rickandmortyapi.com/api/character/3')
+                .then(json => outputCharacter(json.data))
+        }
+    </script>
+        
+    <script>
+        function getDataByFetch() {
+            fetch('https://rickandmortyapi.com/api/character/4')    
+                .then(response => response.json())
+                .then(json => outputCharacter(json))
+        }
+    </script>
+</head>
+    <button style = "width: 400px" onclick = "getDataByXmlHttpRequest()">Получить данные о Рике Санчес с помощью XMLHttpRequest</button><br/><br/>
+    <button style = "width: 400px" onclick = "getDataByJQuery()">Получить данные о Морти Смит с помощью JQuery</button><br/><br/>
+    <button style = "width: 400px" onclick = "getDataByAxios()">Получить данные о Саммер Смит с помощью Axios</button><br/><br/>
+    <button style = "width: 400px" onclick = "getDataByFetch()">Получить данные о Бэт Смит с помощью Fetch</button><br/><br/>
+    <img id = "characterPhoto" style = "width: 400px; height: 400px; border: 1px solid gray">
+    <pre id = "dataContainer"></pre>
+<body>
+</body>
+</html>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0"
+         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+
+    <groupId>ru.otus</groupId>
+    <artifactId>spring-mvc-ajax</artifactId>
+    <version>1.0</version>
+
+    <packaging>pom</packaging>
+
+    <modules>
+        <module>spring-ajax-demo</module>
+        <module>spring-boot-and-react-demo</module>
+    </modules>
+</project>
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0"
+         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+
+    <groupId>ru.otus</groupId>
+    <artifactId>spring-ajax-demo</artifactId>
+    <version>1.0</version>
+
+    <parent>
+        <groupId>org.springframework.boot</groupId>
+        <artifactId>spring-boot-starter-parent</artifactId>
+        <version>3.1.0</version>
+        <relativePath/>
+    </parent>
+
+    <properties>
+        <maven.compiler.source>17</maven.compiler.source>
+        <maven.compiler.target>17</maven.compiler.target>
+    </properties>
+
+    <dependencies>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter</artifactId>
+        </dependency>
+
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-web</artifactId>
+        </dependency>
+
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-thymeleaf</artifactId>
+        </dependency>
+
+        <dependency>
+            <groupId>org.webjars</groupId>
+            <artifactId>jquery</artifactId>
+            <version>3.6.4</version>
+        </dependency>
+
+
+        <dependency>
+            <groupId>com.h2database</groupId>
+            <artifactId>h2</artifactId>
+        </dependency>
+
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-data-jpa</artifactId>
+        </dependency>
+
+        <dependency>
+            <groupId>org.projectlombok</groupId>
+            <artifactId>lombok</artifactId>
+            <version>1.18.24</version>
+            <scope>provided</scope>
+        </dependency>
+
+    </dependencies>
+
+    <build>
+        <plugins>
+            <plugin>
+                <groupId>org.springframework.boot</groupId>
+                <artifactId>spring-boot-maven-plugin</artifactId>
+            </plugin>
+        </plugins>
+    </build>
+</project>
@@ -0,0 +1,13 @@
+package ru.otus.spring;
+
+import org.springframework.boot.SpringApplication;
+import org.springframework.boot.autoconfigure.SpringBootApplication;
+
+@SpringBootApplication
+public class Main {
+
+    public static void main(String[] args) {
+        SpringApplication.run(Main.class);
+    }
+
+}
@@ -0,0 +1,26 @@
+package ru.otus.spring.domain;
+
+import jakarta.persistence.Column;
+import jakarta.persistence.Entity;
+import jakarta.persistence.GeneratedValue;
+import jakarta.persistence.GenerationType;
+import jakarta.persistence.Id;
+import jakarta.persistence.Table;
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+@Entity
+@Table(name = "persons")
+public class Person {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private long id;
+
+    @Column(name = "name")
+    private String name;
+}
@@ -0,0 +1,20 @@
+package ru.otus.spring.page;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+
+@Controller
+public class PersonPagesController {
+
+    @GetMapping("/")
+    public String listPersonsPage(Model model) {
+        model.addAttribute("keywords", "list users in Omsk, omsk, list users, list users free");
+        return "list";
+    }
+
+    @GetMapping("/add")
+    public String addPersonPage() {
+        return "add";
+    }
+}
@@ -0,0 +1,11 @@
+package ru.otus.spring.repostory;
+
+import org.springframework.data.repository.CrudRepository;
+import ru.otus.spring.domain.Person;
+
+import java.util.List;
+
+public interface PersonRepository extends CrudRepository<Person, Long> {
+
+    List<Person> findAll();
+}
@@ -0,0 +1,31 @@
+package ru.otus.spring.rest;
+
+import lombok.RequiredArgsConstructor;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RestController;
+import ru.otus.spring.repostory.PersonRepository;
+import ru.otus.spring.rest.dto.PersonDto;
+
+import java.util.List;
+import java.util.stream.Collectors;
+
+@RequiredArgsConstructor
+@RestController
+public class PersonController {
+
+    private final PersonRepository repository;
+
+    @GetMapping("/api/persons")
+    public List<PersonDto> getAllPersons() {
+        return repository.findAll().stream().map(PersonDto::toDto)
+                .collect(Collectors.toList());
+    }
+
+    @PostMapping("/api/persons")
+    public PersonDto addPerson(@RequestBody PersonDto personDto) {
+        var savedPerson = repository.save(personDto.toDomainObject());
+        return PersonDto.toDto(savedPerson);
+    }
+}
@@ -0,0 +1,30 @@
+/*
+ * Copyright 2016 Russian Post
+ *
+ * This source code is Russian Post Confidential Proprietary.
+ * This software is protected by copyright. All rights and titles are reserved.
+ * You shall not use, copy, distribute, modify, decompile, disassemble or reverse engineer the software.
+ * Otherwise this violation would be treated by law and would be subject to legal prosecution.
+ * Legal use of the software provides receipt of a license from the right name only.
+ */
+package ru.otus.spring.rest.dto;
+
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import ru.otus.spring.domain.Person;
+
+@Data
+@AllArgsConstructor
+public class PersonDto {
+
+    private long id;
+    private String name;
+
+    public static PersonDto toDto(Person person) {
+        return new PersonDto(person.getId(), person.getName());
+    }
+
+    public Person toDomainObject() {
+        return new Person(id, name);
+    }
+}
@@ -0,0 +1,11 @@
+spring:
+  datasource:
+    url: jdbc:h2:mem:testdb
+    initialization-mode: always
+
+  jpa:
+    generate-ddl: false
+    hibernate:
+      ddl-auto: none
+
+    show-sql: true
@@ -0,0 +1 @@
+INSERT INTO persons (name) VALUES ('Pushkin'), ('Lermontov')
@@ -0,0 +1,8 @@
+DROP TABLE IF EXISTS persons;
+
+CREATE TABLE persons (
+    id BIGSERIAL,
+    name VARCHAR(250),
+
+    PRIMARY KEY (id)
+);
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8"/>
+    <title>Edit person</title>
+    <style type="text/css">
+        body {
+            padding: 50px;
+        }
+
+        label {
+            display: inline-block;
+            width: 100px;
+        }
+
+        input:read-only {
+            background: lightgray;
+        }
+
+        .row {
+            margin-top: 10px;
+        }
+    </style>
+    <script>
+        function savePerson() {
+            const savedPersonContainer = document.getElementById("saved-person")
+            const nameInput = document.getElementById("person-name-input")
+            const person = { name: nameInput.value}
+            fetch("api/persons", {
+                method: 'POST',
+                headers: {
+                  'Accept': 'application/json',
+                  'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(person)})
+            .then(rawResponse => rawResponse.json())
+            .then(json => savedPersonContainer.innerHTML = JSON.stringify(json, null, 4))
+        }
+    </script>
+</head>
+<body>
+
+<h3>Form for new person creation:</h3>
+<form id="edit-form" action="add.html" th:method="post">
+    <div class="row">
+        <label for="person-name-input">Name:</label>
+        <input id="person-name-input" name="name" type="text" value="John Doe"/>
+    </div>
+
+    <div class="row">
+        <button type="button" onclick="savePerson()" >Save</button>
+        <a href="list.html" th:href="@{/}"><button type="button">Go Back</button></a>
+    </div>
+</form>
+
+<h3>Saved person:</h3>
+<pre id = "saved-person"></pre>
+
+</body>
+</html>
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="keywords" th:content="${keywords}"/>
+    <title>List of all persons</title>
+    <style type="text/css">
+        body {
+            padding: 50px;
+        }
+
+        .persons {
+            border: 1px solid steelblue;
+            width: 300px;
+            border-collapse: collapse;
+        }
+
+        .persons tr td, th {
+            padding: 5px;
+            border: 1px solid steelblue;
+        }
+
+        .persons td:last-child, td:first-child {
+            width: 50px;
+        }
+    </style>
+    <script src="/webjars/jquery/3.6.4/jquery.min.js"></script>
+</head>
+<body>
+<h1>Persons:</h1>
+
+<a href = "add.html" th:href = "@{/add}">Add new</a>
+<table class="persons">
+    <thead>
+    <tr>
+        <th>ID</th>
+        <th>Name</th>
+    </tr>
+    </thead>
+    <tbody>
+    </tbody>
+</table>
+
+<script>
+    $(function () {
+        $.get('/api/persons').done(function (persons) {
+            persons.forEach(function (person) {
+                $('tbody').append(`
+                    <tr>
+                        <td>${person.id}</td>
+                        <td>${person.name}</td>
+                    </tr>
+                `)
+            });
+        })
+    });
+</script>
+
+</body>
+</html>
@@ -0,0 +1,30 @@
+target/
+
+### STS ###
+.apt_generated
+.classpath
+.factorypath
+.project
+.settings
+.springBeans
+.sts4-cache
+
+### IntelliJ IDEA ###
+.idea
+*.iws
+*.iml
+*.ipr
+
+### NetBeans ###
+/nbproject/private/
+/build/
+/nbbuild/
+/dist/
+/nbdist/
+/.nb-gradle/
+
+
+node/
+/node_modules
+/output
+package-lock.json
@@ -0,0 +1,28 @@
+{
+  "name": "client",
+  "version": "1.0.0",
+  "description": "Simple react demo",
+  "main": "index.js",
+  "scripts": {
+    "dev": "webpack-dev-server --config webpack.dev.config.js",
+    "build": "webpack"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.19.1",
+    "babel-loader": "^8.2.5",
+    "@babel/preset-env": "^7.19.1",
+    "@babel/preset-react": "^7.18.6",
+    "react-css-modules": "^4.7.11",
+    "html-webpack-plugin": "^5.5.0",
+    "terser-webpack-plugin": "^5.3.6",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1"
+  }
+}
@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0"
+         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+
+    <groupId>ru.otus</groupId>
+    <artifactId>spring-boot-and-react-demo</artifactId>
+    <version>1.0</version>
+
+    <parent>
+        <groupId>org.springframework.boot</groupId>
+        <artifactId>spring-boot-starter-parent</artifactId>
+        <version>3.1.0</version>
+        <relativePath/>
+    </parent>
+
+    <properties>
+        <maven.compiler.source>17</maven.compiler.source>
+        <maven.compiler.target>17</maven.compiler.target>
+    </properties>
+
+    <dependencies>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-web</artifactId>
+        </dependency>
+
+
+        <dependency>
+            <groupId>com.h2database</groupId>
+            <artifactId>h2</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-data-jpa</artifactId>
+        </dependency>
+
+
+    </dependencies>
+
+    <build>
+        <plugins>
+            <plugin>
+                <groupId>org.springframework.boot</groupId>
+                <artifactId>spring-boot-maven-plugin</artifactId>
+            </plugin>
+            <plugin>
+                <groupId>com.github.eirslett</groupId>
+                <artifactId>frontend-maven-plugin</artifactId>
+                <version>1.12.1</version>
+                <executions>
+                    <execution>
+                        <id>install node and npm</id>
+                        <goals>
+                            <goal>install-node-and-npm</goal>
+                        </goals>
+                        <configuration>
+                            <nodeVersion>v16.13.2</nodeVersion>
+                            <npmVersion>8.3.2</npmVersion>
+                        </configuration>
+                    </execution>
+                    <execution>
+                        <id>npm install</id>
+                        <goals>
+                            <goal>npm</goal>
+                        </goals>
+                        <phase>generate-resources</phase>
+                        <configuration>
+                            <arguments>install</arguments>
+                        </configuration>
+                    </execution>
+                    <execution>
+                        <id>npm run build</id>
+                        <goals>
+                            <goal>npm</goal>
+                        </goals>
+                        <phase>generate-resources</phase>
+                        <configuration>
+                            <arguments>run build</arguments>
+                        </configuration>
+                    </execution>
+                </executions>
+            </plugin>
+        </plugins>
+    </build>
+</project>
@@ -0,0 +1,13 @@
+package ru.otus.spring;
+
+import org.springframework.boot.SpringApplication;
+import org.springframework.boot.autoconfigure.SpringBootApplication;
+
+@SpringBootApplication
+public class Main {
+
+    public static void main(String[] args) {
+        SpringApplication.run(Main.class);
+    }
+
+}
@@ -0,0 +1,40 @@
+package ru.otus.spring.domain;
+
+import jakarta.persistence.Entity;
+import jakarta.persistence.GeneratedValue;
+import jakarta.persistence.GenerationType;
+import jakarta.persistence.Id;
+import jakarta.persistence.Table;
+
+@Entity
+@Table(name = "persons")
+public class Person {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private int id;
+    private String name;
+
+    public Person() {
+    }
+
+    public Person(String name) {
+        this.name = name;
+    }
+
+    public int getId() {
+        return id;
+    }
+
+    public void setId(int id) {
+        this.id = id;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+}
@@ -0,0 +1,11 @@
+package ru.otus.spring.repostory;
+
+import org.springframework.data.repository.CrudRepository;
+import ru.otus.spring.domain.Person;
+
+import java.util.List;
+
+public interface PersonRepository extends CrudRepository<Person, Integer> {
+
+    List<Person> findAll();
+}
@@ -0,0 +1,25 @@
+package ru.otus.spring.rest;
+
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RestController;
+import ru.otus.spring.repostory.PersonRepository;
+import ru.otus.spring.rest.dto.PersonDto;
+
+import java.util.List;
+import java.util.stream.Collectors;
+
+@RestController
+public class PersonController {
+
+    private final PersonRepository repository;
+
+    public PersonController(PersonRepository repository) {
+        this.repository = repository;
+    }
+
+    @GetMapping("/api/persons")
+    public List<PersonDto> getAllPersons() {
+        return repository.findAll().stream().map(PersonDto::toDto)
+                .collect(Collectors.toList());
+    }
+}
@@ -0,0 +1,50 @@
+/*
+ * Copyright 2016 Russian Post
+ *
+ * This source code is Russian Post Confidential Proprietary.
+ * This software is protected by copyright. All rights and titles are reserved.
+ * You shall not use, copy, distribute, modify, decompile, disassemble or reverse engineer the software.
+ * Otherwise this violation would be treated by law and would be subject to legal prosecution.
+ * Legal use of the software provides receipt of a license from the right name only.
+ */
+package ru.otus.spring.rest.dto;
+
+import ru.otus.spring.domain.Person;
+
+/**
+ * DTO that represents Account
+ */
+@SuppressWarnings("all")
+public class PersonDto {
+
+    private int id = -1;
+    private String name;
+
+    public PersonDto() {
+    }
+
+    public PersonDto(int id, String name) {
+        this.id = id;
+        this.name = name;
+    }
+
+    public int getId() {
+        return id;
+    }
+
+    public void setId(int id) {
+        this.id = id;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+    public static PersonDto toDto(Person person) {
+        return new PersonDto(person.getId(), person.getName());
+    }
+}
@@ -0,0 +1,11 @@
+spring:
+  datasource:
+    url: jdbc:h2:mem:testdb
+    initialization-mode: always
+
+  jpa:
+    generate-ddl: false
+    hibernate:
+      ddl-auto: none
+
+    show-sql: true
@@ -0,0 +1 @@
+INSERT INTO persons (name) VALUES ('Pushkin'), ('Lermontov')
@@ -0,0 +1,8 @@
+DROP TABLE IF EXISTS persons;
+
+CREATE TABLE persons (
+    id BIGSERIAL,
+    name VARCHAR(250),
+
+    PRIMARY KEY (id)
+);
@@ -0,0 +1,58 @@
+import React from 'react'
+
+const styles = {
+    personsTable: {
+        border: "1px solid steelblue",
+        width: "300px",
+        borderCollapse: "collapse",
+    },
+
+    personsTableItem: {
+        padding: "5px",
+        border: "1px solid steelblue"
+    }  
+}
+
+const Header = (props) => (
+    <h1>{props.title}</h1>
+);
+
+export default class App extends React.Component {
+
+    constructor() {
+        super();
+        this.state = {persons: []};
+    }
+
+    componentDidMount() {
+        fetch('/api/persons')
+            .then(response => response.json())
+            .then(persons => this.setState({persons}));
+    }
+
+    render() {
+        return (
+            <React.Fragment>
+                <Header title={'Persons'}/>
+                <table style={styles.personsTable}>
+                    <thead>
+                    <tr style={styles.personsTableItem}>
+                        <th style={styles.personsTableItem}>ID</th>
+                        <th style={styles.personsTableItem}>Name</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {
+                        this.state.persons.map((person, i) => (
+                            <tr style={styles.personsTableItem} key={i}>
+                                <td style={styles.personsTableItem}>{person.id}</td>
+                                <td style={styles.personsTableItem}>{person.name}</td>
+                            </tr>
+                        ))
+                    }
+                    </tbody>
+                </table>
+            </React.Fragment>
+        )
+    }
+};
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Minimal React Boilerplate</title>
+  </head>
+    <body>
+      <noscript>
+        You need to enable JavaScript to run this app.
+      </noscript>
+
+      <div id="root"></div>
+
+      <script src="./bundle.js" type="text/javascript"></script>
+    </body>
+</html>
@@ -0,0 +1,8 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './components/App'
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('root')
+)
@@ -0,0 +1,51 @@
+const TerserPlugin = require("terser-webpack-plugin");
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+    entry: './src/ui/index.js',
+    mode: "production",
+    output: {
+        path: path.resolve(__dirname, 'target/classes/public/'),
+        filename: 'bundle.min.js',
+        libraryTarget: 'umd'
+    },
+
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                exclude: /(node_modules|bower_components|build)/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        presets: ["@babel/preset-env", '@babel/preset-react']
+                    }
+                }
+            }
+        ]
+    },
+
+    optimization: {
+        minimize: true,
+        minimizer: [
+          new TerserPlugin({
+            extractComments: true,
+          }),
+        ],
+    },
+
+    plugins: [
+        new webpack.DefinePlugin({
+            "process.env": {
+                NODE_ENV: JSON.stringify("production")
+            }
+        }),
+        
+        new HtmlWebpackPlugin({
+            filename: 'index.html',
+            template: 'src/ui/index.html'
+        })
+    ]
+}
@@ -0,0 +1,63 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const path = require('path');
+
+module.exports = {
+    entry: './src/ui/index.js',
+    devtool: 'inline-source-map',
+    mode: 'development',
+    output: {
+        path: path.resolve(__dirname),
+        filename: 'bundle.js',
+        libraryTarget: 'umd'
+    },
+
+    devServer: {
+        static: path.resolve(__dirname) + '/src/ui',
+        compress: true,
+        port: 9000,
+        host: 'localhost',
+        open: true,
+/*
+        setupMiddlewares: (middlewares, devServer) => {
+            middlewares.unshift({
+                name: 'inital-data-mw',
+                path: '/api/persons',
+                middleware: (req, res) => res.send([
+                    {id: '1', name: 'Привяу'}
+                ])
+              });
+            return middlewares;
+        },
+*/       
+        proxy: {
+            '*': {
+              target: 'http://localhost:8080',
+              secure: false,
+              changeOrigin: true
+            }
+        }
+        
+        
+    },
+
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                exclude: /(node_modules|bower_components|build)/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        presets: ["@babel/preset-env", '@babel/preset-react']
+                    }
+                }
+            }
+        ]
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            filename: 'index.html',
+            template: 'src/ui/index.html'
+        })
+    ]
+}
				`@@ -0,0 +1 @@`
				`INSERT INTO persons (name) VALUES ('Pushkin'), ('Lermontov')`