{"id":27957707,"url":"https://github.com/vladannovi1234/spring-boot-reactjs-full-stack","last_synced_at":"2026-04-17T00:34:06.895Z","repository":{"id":164615818,"uuid":"617940374","full_name":"vladannovi1234/spring-boot-reactjs-full-stack","owner":"vladannovi1234","description":"Full stack application with Spring boot and React js, with WEBPACK \u0026 BABEL. JUNIT Tests , RESTful API.","archived":false,"fork":false,"pushed_at":"2023-03-23T12:46:06.000Z","size":139,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-07T18:14:14.814Z","etag":null,"topics":["full-stack","java","reactjs","spring-boot","webpack"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vladannovi1234.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-23T12:35:37.000Z","updated_at":"2024-07-31T16:16:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"f18880bc-aeeb-4d2d-a98b-378ae4bc745a","html_url":"https://github.com/vladannovi1234/spring-boot-reactjs-full-stack","commit_stats":null,"previous_names":["vladannovi1234/spring-boot-reactjs-full-stack"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vladannovi1234/spring-boot-reactjs-full-stack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vladannovi1234%2Fspring-boot-reactjs-full-stack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vladannovi1234%2Fspring-boot-reactjs-full-stack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vladannovi1234%2Fspring-boot-reactjs-full-stack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vladannovi1234%2Fspring-boot-reactjs-full-stack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vladannovi1234","download_url":"https://codeload.github.com/vladannovi1234/spring-boot-reactjs-full-stack/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vladannovi1234%2Fspring-boot-reactjs-full-stack/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31910165,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T18:22:33.417Z","status":"ssl_error","status_checked_at":"2026-04-16T18:21:47.142Z","response_time":69,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["full-stack","java","reactjs","spring-boot","webpack"],"created_at":"2025-05-07T18:14:12.240Z","updated_at":"2026-04-17T00:34:06.876Z","avatar_url":"https://github.com/vladannovi1234.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Spring boot and React js fullstack application Part(1/2).\nFull stack application with Spring boot and React js, with **WEBPACK \u0026 BABEL. JUNIT Tests , RESTful API.**\n\n### Show some :heart: and :star: the repo to support the project \n\nI like explaining things in code so without wasting much of your time lets just jump straight in and i will be explaining as we go.\n\n## 1. Spring Boot  (Initializer)\nTo start off with you can use Spring Initializr  to get the Spring Boot project structure for you, and this can be found [here](https://start.spring.io/)\n\nOnce you get there in this case im using Maven , and that's my personal preference over Gradle since it gives a nice xml layout for your setup , in terms of installing dependency , plugins etc. its essentially a tool for your project management, just like package.json for those who are familiar with node js.\n\nYou also need to add a couple of dependencies which are\n* JPA - Data persistence in SQL stores with Java Persistence API\n* thymeleaf - A modern server-side Java template engine\n* WEB - Build web, including RESTful, applications using Spring MVC\n* H2 - Provides a volatile in-memory database\n* Lombok - Java annotation library which helps reduce boilerplate code\n\n## 2. Rest API Service\nNow lets create the REST API service for the backend application which will be able to perform basic **CRUD** (Create, Read, Update ,Delete) functionality.\n\n### a. models\nFirst create a package name models. \nInside models create class User for your user model. See code below\n\n```java\n\npackage com.datsystemz.nyakaz.springbootreactjsfullstack.models;\n\nimport javax.persistence.Entity;\nimport javax.persistence.GeneratedValue;\nimport javax.persistence.GenerationType;\nimport javax.persistence.Id;\n\n@Entity\npublic class User {\n\n    @Id\n    @GeneratedValue(strategy = GenerationType.AUTO)\n    private Long id;\n    private String name;\n    private String surname;\n    private String email;\n    private String username;\n    private String password;\n\n    protected User(){}\n\n    public User(String name, String surname, String email, String username, String password){\n        this.name = name;\n        this.surname = surname;\n        this.email = email;\n        this.username = username;\n        this.password = password;\n    }\n\n    public Long getId(){\n        return id;\n    }\n\n    public String getName() {\n        return name;\n    }\n\n    public String getSurname() {\n        return surname;\n    }\n\n    public String getUsername() {\n        return username;\n    }\n\n    public String getPassword() {\n        return password;\n    }\n\n    public String getEmail() {\n        return email;\n    }\n\n    public void setId(Long id) {\n        this.id = id;\n    }\n\n    public void setName(String name) {\n        this.name = name;\n    }\n\n    public void setSurname(String surname) {\n        this.surname = surname;\n    }\n\n    public void setEmail(String email) {\n        this.email = email;\n    }\n\n    public void setUsername(String username) {\n        this.username = username;\n    }\n\n    public void setPassword(String password) {\n        this.password = password;\n    }\n}\n\n\n```\n\nFirst you will notice the @Entity annotation- this tell Spring that it is a JPA entity and it is mapped to table named User. If you want to the the table name you will have to annotate it with @Table(name = \"new_table_name_here\")\nYou probably noticed that this is too much of code to create an entity not to worry, Remember the Lambok dependancy this is the best time to use it since it offers a functionality of writing code with less boiler plate of code.\n\n```java\npackage com.datsystemz.nyakaz.springbootreactjsfullstack.models;\n\nimport lombok.AllArgsConstructor;\nimport lombok.Data;\nimport lombok.NoArgsConstructor;\n\nimport javax.persistence.Entity;\nimport javax.persistence.GeneratedValue;\nimport javax.persistence.GenerationType;\nimport javax.persistence.Id;\n\n@Entity\n@Data\n@NoArgsConstructor\n@AllArgsConstructor\npublic class User {\n\n    @Id\n    @GeneratedValue(strategy = GenerationType.AUTO)\n    private Long id;\n    private String name;\n    private String surname;\n    private String email;\n    private String username;\n    private String password;\n\n\n}\n```\nIn the above snippet you will notice we have added a couple of annotations\n@Data - is a convenient shortcut that bundles features of @toString, @EqualsAndHashCode, @Getter / @Setter and @RequiredArgsConstructor .\n@NoArgsConstructor provides the  default construct\n@AllArgsConstructor bundles the non default constructor.\n\n### b. repositories\nLets create a repositories package will an interface called UserRepository. The interface extends the Jpa repository so that we can have all methods that is provided by the JpaRepository that allows us to  query our database.\n```java\npackage com.datsystemz.nyakaz.springbootreactjsfullstack.repositories;\n\nimport com.datsystemz.nyakaz.springbootreactjsfullstack.models.User;\nimport org.springframework.data.jpa.repository.JpaRepository;\n\npublic interface UserRepository extends JpaRepository\u003cUser,Long\u003e {\n}\n\n```\n### c. controllers\n\nNow that you got you repository setup its time to create a controllers package and with a class called UserController. \nThe is where the REST service with Spring begins. The controller will save all end points of our user controller, which will then be consumed by the outside world.\nAll the action feature required by our CRUD app are going to seat here ie GET, POST, PUT and DELETE actions. See code below\n\n```java\npackage com.datsystemz.nyakaz.springbootreactjsfullstack.controllers;\n\nimport com.datsystemz.nyakaz.springbootreactjsfullstack.exceptions.ResourceNotFoundException;\nimport com.datsystemz.nyakaz.springbootreactjsfullstack.models.User;\nimport com.datsystemz.nyakaz.springbootreactjsfullstack.repositories.UserRepository;\nimport org.springframework.beans.factory.annotation.Autowired;\nimport org.springframework.http.ResponseEntity;\nimport org.springframework.web.bind.annotation.*;\n\nimport java.util.List;\n\n@RestController\npublic class UserController {\n    private UserRepository userRepository;\n\n    @Autowired\n    public UserController(UserRepository userRepository){\n        this.userRepository = userRepository;\n    }\n\n    @PostMapping(\"/user/save\")\n    public User saveUser(@RequestBody User user){\n        return this.userRepository.save(user);\n    }\n\n    @GetMapping(\"/user/all\")\n    public ResponseEntity\u003cList\u003cUser\u003e\u003e getUsers(){\n        return ResponseEntity.ok(\n          this.userRepository.findAll()\n        );\n    }\n    \n    @GetMapping(\"/user/{id}\")\n    public ResponseEntity\u003cUser\u003e getUser(@PathVariable(value = \"id\" ) Long id){\n        User user = this.userRepository.findById(id).orElseThrow(\n                ()-\u003e new ResourceNotFoundException(\"User not found\")\n        );\n\n        return  ResponseEntity.ok().body(user);\n    }\n    \n    @PutMapping(\"user/{id}\")\n    public User updateUser(@RequestBody User newUser, @PathVariable(value = \"id\") Long id){\n        return this.userRepository.findById(id)\n                .map(user -\u003e {\n                    user.setName(newUser.getName());\n                    user.setSurname(newUser.getSurname());\n                    user.setEmail(newUser.getEmail());\n                    user.setUsername(newUser.getUsername());\n                    user.setPassword(newUser.getPassword());\n                    return this.userRepository.save(user);\n                })\n                .orElseGet(()-\u003e{\n                   newUser.setId(id);\n                   return this.userRepository.save(newUser);\n                });\n    }\n\n    @DeleteMapping(\"user/{id}\")\n    public ResponseEntity\u003cVoid\u003e removeUser(@PathVariable(value = \"id\") Long id){\n        User user =this.userRepository.findById(id).orElseThrow(\n                ()-\u003e new ResourceNotFoundException(\"User not found\"+id)\n        );\n\n        this.userRepository.delete(user);\n        return ResponseEntity.ok().build();\n    }\n\n\n\n\n}\n\n```\nIn the above code the class is annotated with @RestController telling Spring that the data returned by each method will be written straight into the response  body instead of rendering a template.\nThe UserRepository is injected by constructor into the controller. The @Autowired enable automatic dependency injection.\n\nThe @PostMapping , @GetMapping, @PutMapping and @DeleteMapping corresponds to the POST, GET, UPDATE and DELETE actions. \nOne thing to note here is the @DeleteMapping and @GetMapping which is calling a ResourceNotFoundException class that will output the runtime exception.\n\nLets quickly implement the ResourceNotFoundException class. \n\n### d. exceptions\nI like to keep my code clean and packaged. So just quickly create a package called exceptions with a class ResourceNotFoundException. See code below:\n\n```java\npackage com.datsystemz.nyakaz.springbootreactjsfullstack.exceptions;\n\nimport org.springframework.http.HttpStatus;\nimport org.springframework.web.bind.annotation.ResponseStatus;\n\n@ResponseStatus(value =  HttpStatus.NOT_FOUND)\npublic class ResourceNotFoundException extends RuntimeException{\n    public  ResourceNotFoundException(String message){\n        super(message);\n    }\n}\n\n```\nThe above class extends the RuntimeException which will give us access to all methods that are in that class. In this case just call super in the constructor with  message variable. \nThat's it .,now whenever a user is not found it will return the run time exception with user not Found message and status of HttpStatus.NOT_FOUND.\n### e. database\n\n* **NB** Since we have added the H2 in -memory DB . Spring automatically runs it whenever there is persistence to the db. Please note that H2 Database is volatile meaning it will be automatically be created when the server ran and whenever you stop the server it will tear down the db and its contents.\nBy default, Spring Boot configures the application to connect to an in-memory store with the username sa and an empty password. However, we can change those parameters by adding the following properties to the application.properties file:\n\n```properties\nspring.datasource.url=jdbc:h2:mem:testdb\nspring.datasource.driverClassName=org.h2.Driver\nspring.datasource.username=sa\nspring.datasource.password=\nspring.jpa.database-platform=org.hibernate.dialect.H2Dialect\n# Enabling H2 Console\nspring.h2.console.enabled=true\n\n# Custom H2 Console URL\nspring.h2.console.path=/h2\n# Whether to enable remote access.\nspring.h2.console.settings.web-allow-others=true\n\nserver.error.include-stacktrace=never\n```\n### f. REST API TESTING(JPA UNIT TESTING)\nNow that everything is setup its time for the truth to be reviewed. I like to do things differently so instead of testing our API using Postman im going to do JPA Unit testing.\nIf you are familiar with JPA Unit Testing feel free to test with Postman or jump to next section **(INTEGRATING REACTJS)**\n\nNow to get things started quickly install JPA Unit testing dependency in your pom.xml file.\n\n```xml\n\n\u003cdependency\u003e\n    \u003cgroupId\u003ejunit\u003c/groupId\u003e\n    \u003cartifactId\u003ejunit\u003c/artifactId\u003e\n    \u003cscope\u003etest\u003c/scope\u003e\n\u003c/dependency\u003e\n```\nIn your **test/java/com.\u003capplication-name\u003e/** create a file class UserTests with the following testing code:\n\n```java\npackage com.datsystemz.nyakaz.springbootreactjsfullstack;\n\nimport com.datsystemz.nyakaz.springbootreactjsfullstack.models.User;\nimport com.datsystemz.nyakaz.springbootreactjsfullstack.repositories.UserRepository;\nimport org.junit.Assert;\nimport org.junit.jupiter.api.Test;\nimport org.springframework.beans.factory.annotation.Autowired;\nimport org.springframework.boot.test.autoconfigure.orm.jpa.DataJpaTest;\n\n\n@DataJpaTest\npublic class UserTests {\n\n    @Autowired\n    private UserRepository userRepository;\n\n    @Test\n    public void testSaveUser(){\n        User user = new User(\"John\",\"Doe\",\"john.doe@email.com\",\"johhny\",\"strong-password\");\n        userRepository.save(user);\n        userRepository.findById(new Long(1))\n                .map(newUser -\u003e{\n                    Assert.assertEquals(\"John\",newUser.getName());\n                    return true;\n                });\n    }\n\n    @Test\n    public void getUser(){\n        User user = new User(\"John\",\"Doe\",\"john.doe@email.com\",\"johhny\",\"strong-password\");\n        User user2 = new User(\"Daniel\",\"Marcus\",\"daniel@daniel.com\",\"danie\",\"super_strong_password\");\n        userRepository.save(user);\n\n        userRepository.save(user2);\n\n        userRepository.findById(new Long(1))\n                .map(newUser -\u003e{\n                   Assert.assertEquals(\"danie\",newUser.getUsername());\n                   return true;\n                });\n\n    }\n\n    @Test\n    public void getUsers(){\n        User user = new User(\"John\",\"Doe\",\"john.doe@email.com\",\"johhny\",\"strong-password\");\n        User user2 = new User(\"Daniel\",\"Marcus\",\"daniel@daniel.com\",\"danie\",\"super_strong_password\");\n        userRepository.save(user);\n        userRepository.save(user2);\n\n        Assert.assertNotNull(userRepository.findAll());\n    }\n\n    @Test\n    public void deleteUser(){\n        User user = new User(\"John\",\"Doe\",\"john.doe@email.com\",\"johhny\",\"strong-password\");\n        userRepository.save(user);\n        userRepository.delete(user);\n        Assert.assertTrue(userRepository.findAll().isEmpty());\n    }\n\n\n}\n```\nThe @DataJpaTest tells Spring to test the persistence layer components that will autoconfigure in-memory embedded  H2 database and scan for @Entity classes and Spring Data JPA repositories.\nWe need to autowire the UserRepository so that we will have functions provided by the JPA to be able to query our DB.\nSpring will look for function annotated with @Test. The JUNIT ASSERT i going to assert most of the tests.\n\nIn your terminal You can now run :\n\n```cmd\nmvn test\n```\nIf everything runs well you should have an output similar to this\n\n```\n[INFO] \n[INFO] Results:\n[INFO] \n[INFO] Tests run: 5, Failures: 0, Errors: 0, Skipped: 0\n[INFO] \n[INFO] ------------------------------------------------------------------------\n[INFO] BUILD SUCCESS\n[INFO] ------------------------------------------------------------------------\n[INFO] Total time: 11.845 s\n[INFO] Finished at: 2020-09-08T19:01:25+02:00\n[INFO] Final Memory: 32M/370M\n[INFO] ------------------------------------------------------------------------\n```\n* **NB** At this point of your test runs successfully congratulations you have made it :) . Now you can jump in to the next section ie **(INTEGRATING REACTJS)** \n\n## 3. INTEGRATING REACTJS\n\nNow lets jump in to the frontend of things of our fullstack application. \n\nIn this section i am assuming you have already installed **nodejs** in your working environment. If not just quickly install link can be found [here](https://nodejs.org/en/)\n\nWe are not going to use npm create-react-app \u003capp-name\u003e to create our frontend since we dont want to separately run the react js application with its own proxy port usually port 3000.\nWe want our Spring backend application to be able to **serve** the front at its default port 8080, that way we get to experience the **fullstack** of things without having to separately running two instances servers for our front end and backend application.\n\nNow you can prepare the react js project structure by creating these folders in your **root folder** of your application.\n\n```cmd\n$ mkdir -p ./frontend/src/{components,actions,reducers}\n```\nThe above command will create a folder structure that look like this:\n```cmd\nfrontend/\n  src/\n    actions/\n    components/\n    reducers/\n  \n```\nThis is were your react frontend application is going to seat in.\n\n### 3a Installing packages\n\nWe now need to create a package.json file which will have all your dependencies that is going to be used by  reactjs framework. \nTo create the package.json file just run\n```cmd\n$ npm init -y\n```\nSince you have already installed node this npm command should run just fine, and you now should be able to see the package.json file in your root folder of your project.\n\nNow at this point you now need to install the following Dev Dependencies and Dependencies for your react .\n\n```cmd\n$ npm i -D webpack webpack-cli\n$ npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties\n$ npm i -D sass-loader css-loader\n$ npm i react react-dom react-router-dom\n$ npm i redux react-redux redux-thunk redux-devtools-extension\n$ npm i redux-form\n$ npm i axios\n$ npm i lodash\n```\nThis will install the Dev Dependencies required by react js .\n* webpack - will bundle Javascript files for usage in a browser\n* babel - is a transpiler ie a Javascript  compiler used to convert ECMAScript 2015+ code into a backwards compatible version of Javascript in current and older browser environments.\n* react - Javascript library for building user interfaces. Developed by facebook\n* redux - The is a predictable state container for Js apps\n* axios - Promise based HTTP client\n* lodash(optional) - Lodash is a reference library made with JavaScript.\n\n### 3b Babel Configuration\nAdd a file name .babelrc to the root directory and configure babel:\n\n```\n{\n  \"presets\": [\n    [\n      \"@babel/preset-env\",\n      {\n        \"targets\": {\n          \"node\": \"current\"\n        },\n        \"useBuiltIns\": \"usage\",\n        \"corejs\": 3\n      }\n    ],\n    \"@babel/preset-react\"\n  ],\n  \"plugins\": [\"@babel/plugin-proposal-class-properties\"]\n}\n```\n\n\n### 3c. Webpack Configuration\n\nAdd a file named webpack.config.js to the root directory  and configure webpack:\n\n```js\nvar path = require('path');\n\nmodule.exports = {\n    entry: './src/main/js/App.js',\n    devtool: 'sourcemaps',\n    cache: true,\n    mode: 'development',\n    output: {\n        path: __dirname,\n        filename: './src/main/resources/static/built/bundle.js'\n    },\n    module: {\n        rules: [\n            {\n                test: path.join(__dirname, '.'),\n                exclude: /(node_modules)/,\n                use: [{\n                    loader: 'babel-loader',\n                    options: {\n                        presets: [\"@babel/preset-env\", \"@babel/preset-react\"]\n                    }\n                }]\n            },\n            {\n                test: /\\.css$/,\n                use: [\n                    'style-loader',\n                    'css-loader'\n                ]\n            },\n            {\n                test: /\\.(png|svg|jpg|gif|eot|otf|ttf|woff|woff2)$/,\n                use: [\n                    {\n                        loader: 'url-loader',\n                        options: {}\n                    }\n                ]\n            }\n        ]\n    }\n};\n```\n\"\"\"Quote Spring Docs\"\"\"\nThis webpack configuration file:\n\n* Defines the entry point as ./src/main/js/App.js. In essence, App.js (a module you will write shortly) is the proverbial public static void main() of our JavaScript application. webpack must know this in order to know what to launch when the final bundle is loaded by the browser.\n\n* Creates sourcemaps so that, when you are debugging JS code in the browser, you can link back to original source code.\n\n* Compile ALL of the JavaScript bits into ./src/main/resources/static/built/bundle.js, which is a JavaScript equivalent to a Spring Boot uber JAR. All your custom code AND the modules pulled in by the require() calls are stuffed into this file.\n\n* It hooks into the babel engine, using both es2015 and react presets, in order to compile ES6 React code into a format able to be run in any standard browser.\n\nWith this webpack configuration file setup we now need to create a couple of directories\n\n### 3d. React boiler plate Setup\n1. Notice how the above webpack is referencing to ./src/main/js/App.js . Let create a js folder in main and an App.js file inside \nThe App.js file should have this following code:\n```typescript jsx\nimport React, { Component } from \"react\";\nimport ReactDOM from \"react-dom\";\n\n\nexport class App extends Component {\n    render() {\n        return (\n            \u003cdiv\u003e\n                \u003ch1\u003eWelcome to React Front End Served by Spring Boot\u003c/h1\u003e\n            \u003c/div\u003e\n        );\n    }\n}\n\nexport default App;\n\nReactDOM.render(\u003cApp /\u003e, document.querySelector(\"#app\"));\n\n```\n2. Now we now need to prepare the html that will render the App.js we just created in Spring\n\nRemember the Thymeleaf dependency we installed at the beginning in the Spring Initializer it time to get that to use\nTo get started  you need to create an index page in **src/main/resources/templates/index.html**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml xmlns:th=\"https://www.thymeleaf.org\"\u003e\n\u003chead lang=\"en\"\u003e\n    \u003cmeta charset=\"UTF-8\"/\u003e\n    \u003ctitle\u003eReactJS + Spring Data REST\u003c/title\u003e\n    \u003clink rel=\"stylesheet\" href=\"/main.css\" /\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n    \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n\n    \u003cscript src=\"built/bundle.js\"\u003e\u003c/script\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n```\nThe key part in this template is the \u003cdiv id=\"app\"\u003e\u003c/div\u003e component in the middle. It is where you will direct React to plug in the rendered output.\n\nThe bundle.js will automatically generated when we run our application.\n\nSpring will automatically know that the main.css file will be created under the static folder in your resources folder so go ahead and create it will use it later.\n\nWith that set up you should have the Final project structure now looking to something like this:\n\n```cmd\n- frontend\n- sample-project-root\n    - src\n        - main\n            -java\n            - js\n                App.js\n                index.js\n            - static\n                main.css\n            - resources\n                - templates\n                    index.html\n webpack.config.js\n package.json\n pom.xml\n```\nIf this is you project string you are good to go and now left with one last step to test this out.\n\n### 3e. Script Setup in package.json\nIn the package.json file we need to finally replace the script tag with the following\n\n```json\n ...\n ...\n\"scripts\": {\n    \"watch\": \"webpack --watch -d --output ./target/classes/static/built/bundle.js\"\n  },\n\n...\n...\n```\nThis will run the webpack and tell it to render the output (bundle.js) to ./taget/classes/static/built/ folder.\nThe --watch tag will tell the webpack to constantly watch for changes in our code so that when there is such it will update the bundle.js file.\n\n### 3f. Final Setup Step \nRemember when we create our UserController it had a @RestController annotation to serve the rest methods in that class.\nIf can still recall we said the @RestController tells Spring that the data returned by each method will be written straight into the response  body instead of rendering a template.\nNow we need an endpoint that will render a template. S\nSo lets create a separate class in our controllers called WebMainController which will render the index page of our react App.js main component.\n\n```java\npackage com.datsystemz.com.microfinancedatsystemz.controllers;\n\nimport org.springframework.stereotype.Controller;\nimport org.springframework.web.bind.annotation.RequestMapping;\n\n@Controller\npublic class WebMainController {\n\n    @RequestMapping(value = \"/\")\n    public String index() {\n        return \"index\";\n    }\n}\n\n```\n\n## 4. FINAL TEST\nNow lets test the full stack application\nFirst run your server \n```cmd\n$ mvn spring-boot:run\n```\nIf there are no error you are good it means we haven't messed anything up since our last JUNIT TESTS.\nFinally transpile your react app by running:\n```cmd\n$ npm run-script watch\n```\nNow you can go to you browser http://localhost:8080/ and if this appears on your browser:\n\n# Welcome to React Front End Served by Spring Boot\n\nThen you have successfully integrated react js and spring boot. Full stack application. If you make changes in your app webpack should be able to update those changes, and all you have to do is to restart your browser.\n\nI know this was a long tutorial I will make it in parts and will create a Part 2 of this as soon as i can . So that you will now Learn React.\n\nThank you for taking your time in reading this article.\n\n!!END\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvladannovi1234%2Fspring-boot-reactjs-full-stack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvladannovi1234%2Fspring-boot-reactjs-full-stack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvladannovi1234%2Fspring-boot-reactjs-full-stack/lists"}