React.js and Spring Data REST :: A tutorial based on the 5-part blog series by Greg Turnquist
Home Page: https://spring.io/guides/tutorials/react-and-spring-data-rest
This tutorial shows a collection of apps that use Spring Data REST and its powerful backend functionality, combined with React’s sophisticated features to build an easy-to-understand UI.
Spring Data REST provides a fast way to build hypermedia-powered repositories.
React is Facebook’s solution to efficient, fast, and easy-to-use views in JavaScript.
The guide is not being displayed properly at https://spring.io/guides/tutorials/react-and-spring-data-rest/
Screenshot:
It looks like this might simply be that the file is no longer under resources but rather
https://github.com/spring-guides/tut-react-and-spring-data-rest/blob/master/basic/src/main/js/app.js
This section needs more detail.
I'm following along building my own CRUD API app but I can't for the life of me figure out how these are installed, or what's happening at this step.
Basically the issue I'm running into is that bundle.js hasn't been generated. Not sure at what point it should've been.
I would like to see these examples using Gradle and Groovy with an update for using New Features in Spring Boot 1.4.0.M2. I've begun work here: https://github.com/DarcStarSolutions/webjars-webpack-with-gradle . My project needs to be renamed and there are some tweaks that need to be done because of the gradle plugin. As Gradle doesn't have a comparable plugin to Maven FrontEnd by default, I'm using the Gradle Node Plugin; it can be found here: https://github.com/srs/gradle-node-plugin . I'm happy to contribute/collaborate on this.
Currently, I have the basic and hypermedia projects working correctly.
How can I get rid of that employee under _links?
I want to access the WebSocket from another host. I tried to set the .setAllowedOrigins("*") to enable CORS like this, which does not work:
@Component
@EnableWebSocketMessageBroker
public class WebSocketConfiguration extends AbstractWebSocketMessageBrokerConfigurer {
public static final String MESSAGE_PREFIX = "/topic";
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/payroll").setAllowedOrigins("*").withSockJS();
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.enableSimpleBroker(MESSAGE_PREFIX);
registry.setApplicationDestinationPrefixes("/app");
}
}
This issue is opened as a place to discuss https://spring.io/blog/2015/09/01/react-js-and-spring-data-rest-part-1-basic-features#comment-2444382969.
Hi,
In package.json of security module there are two missing dependencies:
"rest": "^1.3.1",
"when": "^3.7.7"
Without this bundle.js is not built correctly.
Regards,
Piotr
Just cloned the master, did maven install for basic-project and started it.
When accessing localhost:8080 a blank page is shown, with this errors showing up in the console:
require.js:1952 GET http://localhost:8080/bower_components/react/JSXTransformer.js req.load @ require.js:1952context.load @ require.js:1679Module.load @ require.js:829Module.fetch @ require.js:819Module.check @ require.js:851Module.enable @ require.js:1177context.enable @ require.js:1550(anonymous function) @ require.js:1162(anonymous function) @ require.js:131each @ require.js:56Module.enable @ require.js:1114Module.init @ require.js:783(anonymous function) @ require.js:1453 require.js:165 Uncaught Error: Script error for "JSXTransformer/JSXTransformer" http://requirejs.org/docs/errors.html#scripterror
in the security
it load list data and load row data again
Is it duplicate data load?
When running the events subject, I'm encountering the following issue:
When setting the number of employees to be displayed large enough that all employees are shown on a single, creating a new employee does not automatically update the web page. When the data is shown on multiple pages, the websocket update works as described. I'm uncertain if this is the way that the code is intended to work in this situation or if it is a defect/bug.
This approach might be one of the best approaches i have in hand to use my REST services i built on Springboot but still i am concerned about how to make this SEO friendly. Since it will be a one page app?
As in topic. If I run app by RUN command in IntelliJ IDE Employye engine works fine but browser dosen't show the table. If I run app by cmd and mvn ... :run - everything is OK. Where is the problem?
Hi,
Thanks for this awesome tutorial. I learned good react design here. But I do find a place that could be better.
It's in Part 3 - Conditional Operations. In UpdateDialog component, when we define the form input, we set
<p key={this.props.employee.entity[attribute]}>This works most of the time, but it can't guarantee the key uniqueness. If firstName = lastName, we will have a problem. If we set
<p key={attribute}>It can solve this problem because attributes are different by design. I notice we use this key assignment in CreateDialog component. So UpdateDialog component should follow the same pattern, right?
Thanks
In the past (basic) tutorial everything worked fine. Now I have some trouble loading employees using the loadFromServer method.
Line 279 is the var inputs part of UpdateDialog
render() {
var inputs = this.props.attributes.map(attribute =>
<p key={this.props.farmer.entity[attribute]}>
<input type="text" placeholder={attribute}
defaultValue={this.props.farmer.entity[attribute]}
ref={attribute} className="field" />
</p>
);
Accessing /api returns
What might be the problem here?
Hi! First of all, I appreciate for your this tutorial.
I am a learner to follow React.js and Spring Data Rest.
I have managed to followed your tutorial upto Part 2-Hypermedia Controls.
I have also kept my practice source in my github (https://github.com/tudoistube/zspringReact/tree/springReact_step03).
In Part3, I met a error message "Uncaught TypeError: Cannot convert undefined or null to object(…)" in app.js.
The Error has been produced in the following procedures :
App component call its loadFromServer() in its lifecycle 'componentDidMount'.
↓
follow() function accesses 'employees' resources with its relationship name 'employees' expressed in HAL and pageSize parameter.
↓
then gets 'employeeCollection' data from backend and use client which makes a REST call.
↓
client instance makes a REST call for JSON schema data and embedded promise get employeeCollection.
↓
convert employeeCollection into a form of array to retrieve each individual resources.
↓
The then(employeePromises ⇒ …) clause takes the array of GET promises and merges them into a single promise with when.all(),
resolved when all the GET promises are resolved.
↓
Finally, loadFromServer wraps up with done(employees ⇒ …) where the UI state is updated using this amalgamation of data.
My problem has occurred at "attributes: Object.keys(this.schema.properties),".
With an attached capture image, it shows a console output message "Uncaught TypeError: Cannot convert undefined or null to object(…)",
I have searched and I just only guessed it might be necessary to declare this.schema with a datatype
before 'this' makes a property of schema and receive 'schema.entity'.
I am still familiar with declaring this' property only in component's constructor.
As I afraid of too much comment in my source kept in my gitHub(https://github.com/tudoistube/zspringReact/blob/springReact_step03/zspringReact3_Part03/src/main/js/app.js
),
I used the same file 'app.js' from here and have run it again but failed with the same console message as above.
Is there any changes except App.js file in Part3? I think only App.js has been modified in Part3.
Thanks for reading my questions and hope to find any clue to solve this problem.
I'm not 100% sure, but I think using #employee?.manager?.name == authentication?.name can easily circumvented by an attacker.
Example:
Manager M1 with Employee E1 and Manager M2.
Manager M2 can do PUT or PATCH and set the json "manager" field to {link to M2}. Now E1 has the manager M2 and the security doesn't worked.
What would be the correct approach to separate the frontend resources/* from the Spring Boot backend? The first thing that I have noticed is the CORS issue if I am running the frontend on my local Apache http://localhost/~Marcel/react/* and Spring works on http://localhost:8080. I plan to have a couple of different Spring Boot and Node.js projects that are going to share the same frontend.
Plugin execution not covered by lifecycle configuration: com.github.eirslett:frontend-maven-plugin:0.0.24:webpack (execution: webpack build, phase: generate-resources)
Using Babel 6 instead of the version 5 included in this project needs an explicit import of the ES2015 and React plugins. Whenever it's updated, the babel-preset-{es2015,react} modules will need to be added as dependencies, and the following .babelrc will need to be added to the project root:
{
"presets": [
"es2015",
"react"
]
}
Hello guys,
I'm trying to finish tutorial on spring page using this git hub repo however when I'm trying to bring to life my first UI I'm getting:
Uncaught TypeError: client(...).done is not a function
I'm not sure what I'm doing wrong ... I checked app.js and also client.js everything looks like in this repo.
Any ideas? I need to say that I'm new in this matter ...
As of version 2.0.0, it appears that the Promise returned by the rest.js client call no longer defines a done() method, instead relying on the first argument to then() (more minimally conforming to A+). The AJAX calls seem to work correctly when done is trivially replaced with then.
I'm enjoying your tutorial - It's easy to follow and get up and running...
I've gone through it and it's not immediately obvious to me - being basically a junior java dev - what database are you using? I like your explanation of the JPA but where does the data persist to?!
In basic part, I put main() in A package, HomeController in B package.
Change Employee to Account
After start app, curl localhost:8080/api,
below code // start to //end is none, which means DatabaseLoader didn't load the pre-data.
{
"_links" : {
// start
"accounts" : {
"href" : "http://localhost:8080/api/accounts"
},
// end
"profile" : {
"href" : "http://localhost:8080/api/profile"
}
}
}
Issue:
basic example dose not return employee details (such as firstName, lastName) . it looks something like this :
$ curl localhost:8080/api/employees
{
"_embedded" : {
"employees" : [ {
"_links" : {
"self" : {
"href" : "http://localhost:8080/api/employees/1"
}
}
} ]
}
}
Solution
Update to "spring-boot-starter-parent" version from 1.5.1.RELEASE to 1.5.3.RELEASE
in pom.xml#L10
Hi, thanks for your effort but this project seems to be failing at least from part 1 to part 4. While backend system is up and running I still cannot see Employee information on browser with 'localhost:8080'. Can you please suggest?
Develop environment: Windows 64bit + Java 1.8.
After starting ReactAndSpringDataRestApplication in IDE, curl shows:
>curl localhost:8080/api/employees
{
"_embedded" : {
"employees" : [ {
"firstName" : "Frodo",
"lastName" : "Baggins",
"description" : "ring bearer",
"_links" : {
"self" : {
"href" : "http://localhost:8080/api/employees/1"
},
"employee" : {
"href" : "http://localhost:8080/api/employees/1"
}
}
}, {
"firstName" : "Bilbo",
"lastName" : "Baggins",
"description" : "burglar",
"_links" : {
"self" : {
"href" : "http://localhost:8080/api/employees/2"
},
"employee" : {
"href" : "http://localhost:8080/api/employees/2"
}
}
}, {
"firstName" : "Gandalf",
"lastName" : "the Grey",
"description" : "wizard",
"_links" : {
"self" : {
"href" : "http://localhost:8080/api/employees/3"
},
"employee" : {
"href" : "http://localhost:8080/api/employees/3"
}
}
}, {
"firstName" : "Samwise",
"lastName" : "Gamgee",
"description" : "gardener",
"_links" : {
"self" : {
"href" : "http://localhost:8080/api/employees/4"
},
"employee" : {
"href" : "http://localhost:8080/api/employees/4"
}
}
}, {
"firstName" : "Meriadoc",
"lastName" : "Brandybuck",
"description" : "pony rider",
"_links" : {
"self" : {
"href" : "http://localhost:8080/api/employees/5"
},
"employee" : {
"href" : "http://localhost:8080/api/employees/5"
}
}
}, {
"firstName" : "Peregrin",
"lastName" : "Took",
"description" : "pipe smoker",
"_links" : {
"self" : {
"href" : "http://localhost:8080/api/employees/6"
},
"employee" : {
"href" : "http://localhost:8080/api/employees/6"
}
}
} ]
},
"_links" : {
"self" : {
"href" : "http://localhost:8080/api/employees"
},
"profile" : {
"href" : "http://localhost:8080/api/profile/employees"
}
},
"page" : {
"size" : 20,
"totalElements" : 6,
"totalPages" : 1,
"number" : 0
}
}
And entering 'http://localhost:8080/api/employees' in browser address bar, I can see same output.
Then I tried curl localhost:8080
> curl localhost:8080
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>ReactJS + Spring Data REST</title>
<link rel="stylesheet" href="/main.css" />
</head>
<body>
<div id="react"></div>
<script src="built/bundle.js"></script>
</body>
</html>
And entering 'http://localhost:8080' in browser address bar, I can see no output.
I'm getting the below error when trying to run the latest verison of the basic project, any ideas on what's causing it. I tried updating the the frontend-maven-pligin to 0.0.28 but I still get the same error.
./mvnw spring-boot:run
[INFO] Scanning for projects...
[INFO]
[INFO] ------------------------------------------------------------------------
[INFO] Building React.js and Spring Data REST - Basic 0.0.1-SNAPSHOT
[INFO] ------------------------------------------------------------------------
[INFO]
[INFO] >>> spring-boot-maven-plugin:1.3.3.RELEASE:run (default-cli) > test-compile @ react-and-spring-data-rest-basic >>>
[INFO]
[INFO] --- frontend-maven-plugin:0.0.24:install-node-and-npm (install node and npm) @ react-and-spring-data-rest-basic ---
[INFO] Node v0.10.33 is already installed.
[INFO] Found NPM version 1.3.8
[INFO]
[INFO] --- frontend-maven-plugin:0.0.24:npm (npm install) @ react-and-spring-data-rest-basic ---
[INFO] Running 'npm install --color=false' in /Users/davidbacon/Dev/workspaces/tut-react-and-spring-data-rest/basic/src/main/resources/static
[ERROR] npm WARN package.json [email protected] No README data
[ERROR] npm WARN unmet dependency /Users/davidbacon/Dev/workspaces/tut-react-and-spring-data-rest/basic/src/main/resources/static/node_modules/babel-core/node_modules/source-map-support requires source-map@'0.1.32' but will load
[ERROR] npm WARN unmet dependency undefined,
[ERROR] npm WARN unmet dependency which is version undefined
[INFO]
[INFO] --- frontend-maven-plugin:0.0.24:webpack (webpack build) @ react-and-spring-data-rest-basic ---
[INFO] Running 'webpack.js --no-color' in /Users/davidbacon/Dev/workspaces/tut-react-and-spring-data-rest/basic/src/main/resources/static
[ERROR]
[ERROR] module.js:340
[ERROR] throw err;
[ERROR] ^
[ERROR] Error: Cannot find module 'crypto-browserify'
[ERROR] at Function.Module._resolveFilename (module.js:338:15)
[ERROR] at Function.require.resolve (module.js:384:19)
[ERROR] at Object. (/Users/davidbacon/Dev/workspaces/tut-react-and-spring-data-rest/basic/src/main/resources/static/node_modules/webpack/node_modules/node-libs-browser/index.js:7:31)
[ERROR] at Module._compile (module.js:456:26)
[ERROR] at Object.Module._extensions..js (module.js:474:10)
[ERROR] at Module.load (module.js:356:32)
[ERROR] at Function.Module._load (module.js:312:12)
[ERROR] at Module.require (module.js:364:17)
[ERROR] at require (module.js:380:17)
[ERROR] at Object. (/Users/davidbacon/Dev/workspaces/tut-react-and-spring-data-rest/basic/src/main/resources/static/node_modules/webpack/lib/node/NodeSourcePlugin.js:7:23)
[ERROR] at Module._compile (module.js:456:26)
[ERROR] at Object.Module._extensions..js (module.js:474:10)
[ERROR] at Module.load (module.js:356:32)
[ERROR] at Function.Module._load (module.js:312:12)
[ERROR] at Module.require (module.js:364:17)
[ERROR] at require (module.js:380:17)
[ERROR] at OptionsApply.WebpackOptionsApply.process (/Users/davidbacon/Dev/workspaces/tut-react-and-spring-data-rest/basic/src/main/resources/static/node_modules/webpack/lib/WebpackOptionsApply.js:72:28)
[ERROR] at webpack (/Users/davidbacon/Dev/workspaces/tut-react-and-spring-data-rest/basic/src/main/resources/static/node_modules/webpack/lib/webpack.js:22:48)
[ERROR] at processOptions (/Users/davidbacon/Dev/workspaces/tut-react-and-spring-data-rest/basic/src/main/resources/static/node_modules/webpack/bin/webpack.js:152:17)
[ERROR] at Object. (/Users/davidbacon/Dev/workspaces/tut-react-and-spring-data-rest/basic/src/main/resources/static/node_modules/webpack/bin/webpack.js:192:1)
[ERROR] at Module._compile (module.js:456:26)
[ERROR] at Object.Module._extensions..js (module.js:474:10)
[ERROR] at Module.load (module.js:356:32)
[ERROR] at Function.Module._load (module.js:312:12)
[ERROR] at Function.Module.runMain (module.js:497:10)
[ERROR] at startup (node.js:119:16)
[ERROR] at node.js:906:3
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 1.720 s
[INFO] Finished at: 2016-03-13T20:59:23+00:00
[INFO] Final Memory: 16M/368M
[INFO] ------------------------------------------------------------------------
[ERROR] Failed to execute goal com.github.eirslett:frontend-maven-plugin:0.0.24:webpack (webpack build) on project react-and-spring-data-rest-basic: Failed to run task: 'webpack.js --no-color' failed. (error code 8) -> [Help 1]
[ERROR]
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR]
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoFailureException
Hello sir,
I was trying spring boot + reactjs + maven for the first time. But importing this project shows me following error in pom.xml. I am new to maven.
Failed to run task (com.github.eirslett:frontend-maven-plugin:1.2:npm:npm install:generate-resources)
org.apache.maven.plugin.MojoFailureException: Failed to run task at
com.github.eirslett.maven.plugins.frontend.mojo.AbstractFrontendMojo.execute(AbstractFrontendMojo.java:95) at
org.apache.maven.plugin.DefaultBuildPluginManager.executeMojo(DefaultBuildPluginManager.java:134) at
org.eclipse.m2e.core.internal.embedder.MavenImpl.execute(MavenImpl.java:331) at
org.eclipse.m2e.core.internal.embedder.MavenImpl$11.call(MavenImpl.java:1362) at
org.eclipse.m2e.core.internal.embedder.MavenImpl$11.call(MavenImpl.java:1) at
org.eclipse.m2e.core.internal.embedder.MavenExecutionContext.executeBare(MavenExecutionContext.java:176) at
org.eclipse.m2e.core.internal.embedder.MavenExecutionContext.execute(MavenExecutionContext.java:112) at
org.eclipse.m2e.core.internal.embedder.MavenImpl.execute(MavenImpl.java:1360) at
org.eclipse.m2e.core.project.configurator.MojoExecutionBuildParticipant.build(MojoExecutionBuildParticipant.java:
52) at org.eclipse.m2e.core.internal.builder.MavenBuilderImpl.build(MavenBuilderImpl.java:137) at
org.eclipse.m2e.core.internal.builder.MavenBuilder$1.method(MavenBuilder.java:172) at
org.eclipse.m2e.core.internal.builder.MavenBuilder$1.method(MavenBuilder.java:1) at
org.eclipse.m2e.core.internal.builder.MavenBuilder$BuildMethod$1$1.call(MavenBuilder.java:115) at
org.eclipse.m2e.core.internal.embedder.MavenExecutionContext.executeBare(MavenExecutionContext.java:176) at
org.eclipse.m2e.core.internal.embedder.MavenExecutionContext.execute(MavenExecutionContext.java:112) at
org.eclipse.m2e.core.internal.builder.MavenBuilder$BuildMethod$1.call(MavenBuilder.java:105) at
org.eclipse.m2e.core.internal.embedder.MavenExecutionContext.executeBare(MavenExecutionContext.java:176) at
org.eclipse.m2e.core.internal.embedder.MavenExecutionContext.execute(MavenExecutionContext.java:151) at
org.eclipse.m2e.core.internal.embedder.MavenExecutionContext.execute(MavenExecutionContext.java:99) at
org.eclipse.m2e.core.internal.builder.MavenBuilder$BuildMethod.execute(MavenBuilder.java:86) at
org.eclipse.m2e.core.internal.builder.MavenBuilder.build(MavenBuilder.java:200) at
org.eclipse.core.internal.events.BuildManager$2.run(BuildManager.java:735) at
org.eclipse.core.runtime.SafeRunner.run(SafeRunner.java:42) at
org.eclipse.core.internal.events.BuildManager.basicBuild(BuildManager.java:206) at
org.eclipse.core.internal.events.BuildManager.basicBuild(BuildManager.java:246) at
org.eclipse.core.internal.events.BuildManager$1.run(BuildManager.java:301) at
org.eclipse.core.runtime.SafeRunner.run(SafeRunner.java:42) at
org.eclipse.core.internal.events.BuildManager.basicBuild(BuildManager.java:304) at
org.eclipse.core.internal.events.BuildManager.basicBuildLoop(BuildManager.java:360) at
org.eclipse.core.internal.events.BuildManager.build(BuildManager.java:383) at
org.eclipse.core.internal.events.AutoBuildJob.doBuild(AutoBuildJob.java:144) at
org.eclipse.core.internal.events.AutoBuildJob.run(AutoBuildJob.java:235) at
org.eclipse.core.internal.jobs.Worker.run(Worker.java:55) Caused by:
com.github.eirslett.maven.plugins.frontend.lib.TaskRunnerException: 'npm install' failed. (error code 243) at
com.github.eirslett.maven.plugins.frontend.lib.NodeTaskExecutor.execute(NodeTaskExecutor.java:60) at
com.github.eirslett.maven.plugins.frontend.mojo.NpmMojo.execute(NpmMojo.java:62) at
com.github.eirslett.maven.plugins.frontend.mojo.AbstractFrontendMojo.execute(AbstractFrontendMojo.java:89) ...
If possible can you also refer me the sample project in gradle i.e. spring boot + reactjs + gradle project. I am unable to find in gradle build.
Show how to write a custom finder and how it''s found in the hypermedia.
Why you haven't configured spring.resources.static-locations in application.config - as a result my browser doesn't see the js package.
I have followed the project structure and all the files as well. However, I keep getting this error saying could not exec java: Application finished with exit code: 1.
I have looked this up on google and most people say that the path variables are usually set wrong however I have set all my path variables properly as well. And still get this error. My backend java code is working perfectly fine as I am able to see my entries using /api. But I am not able to see the tables.
I would greatly appreciate any help given.
Hi there, I'm trying to execute the steps as listed in
I get the following error on step 3.
Exception in thread "main" java.lang.NoClassDefFoundError: org/springframework/context/ApplicationEvent
at com.greglturnquist.payroll.ReactAndSpringDataRestApplication.main(ReactAndSpringDataRestApplication.java:29)
Caused by: java.lang.ClassNotFoundException: org.springframework.context.ApplicationEvent
at java.net.URLClassLoader.findClass(URLClassLoader.java:381)
at java.lang.ClassLoader.loadClass(ClassLoader.java:424)
at sun.misc.Launcher$AppClassLoader.loadClass(Launcher.java:331)
at java.lang.ClassLoader.loadClass(ClassLoader.java:357)
... 1 more
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 56.262 s
[INFO] Finished at: 2017-02-22T10:23:48-05:00
[INFO] Final Memory: 35M/167M
[INFO] ------------------------------------------------------------------------
[ERROR] Failed to execute goal org.springframework.boot:spring-boot-maven-plugin:1.5.1.RELEASE:run (default-cli) on project react-and-spring-data-rest-basic: Could not exec java: Application finished with exit code: 1 -> [Help 1]
[ERROR]
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR]
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoExecutionException
Here is my 'mvn -v'
Apache Maven 3.3.9 (bb52d8502b132ec0a5a3f4c09453c07478323dc5; 2015-11-10T11:41:47-05:00)
Maven home: /usr/local/Cellar/maven/3.3.9/libexec
Java version: 1.8.0_121, vendor: Oracle Corporation
Java home: /Library/Java/JavaVirtualMachines/jdk1.8.0_121.jdk/Contents/Home/jre
Default locale: en_US, platform encoding: UTF-8
OS name: "mac os x", version: "10.11.6", arch: "x86_64", family: "mac"
I'm new to Java, Maven, Spring, etc, but trying to learn. Any help is appreciated.
Royce
Hi, may I ask how to disable spring boot from cutting off file extension with RequestMapping please?
My code:
@RequestMapping(value = "/uploaded/{filename}", method = RequestMethod.GET)
public ResponseEntity<byte[]> getUploaded(@PathVariable String filename) throws IOException {
logger.debug("getUploaded filename=" + filename);
HttpHeaders httpHeaders = new HttpHeaders();
Resource file = storageService.loadAsResource(filename);
InputStream inputStream = file.getInputStream();
byte[] data = IOUtils.toByteArray(inputStream);
httpHeaders.setCacheControl(CacheControl.noCache().getHeaderValue());
return new ResponseEntity<>(data, httpHeaders, HttpStatus.OK);
}
With request: localhost:8080/uploaded/a.png or localhost:8080/uploaded/b.jpg
I got logging:
getUploaded filename=a
getUploaded filename=b
So obviously the file extension is removed by spring boot. How to fix this please?
Hi,
i'm having a problem with the client.js. Maven gives following Info
[INFO] ERROR in ./client.js
[INFO] Module not found: Error: Cannot resolve 'file' or 'directory' ./api/uriTemplateInterceptor in /src/main/resources/static
[INFO] @ ./client.js 9:29-68
[INFO]
[INFO] ERROR in ./client.js
[INFO] Module not found: Error: Cannot resolve 'file' or 'directory' ./api/uriListConverter in /src/main/resources/static
[INFO] @ ./client.js 15:35-68
and in Chrome browser the Console says:
Cannot find module "./api/uriTemplateInterceptor"
Do you know how i can fix that?
Best Greetings!
Error:
When clicking the "Update" button while running the tut-react-and-spring-data-rest/security project, the Data is not updated. This is because the Manager is not correctly mapped to the Employee.
Solution (proposed):
Add HandleBeforeSave in class com.greglturnquist.payroll.SpringDataRestEventHandler.java
Add method
@HandleBeforeSave public void applyUserInformationBeforeSave(Employee employee) { String name = SecurityContextHolder.getContext().getAuthentication().getName(); Manager manager = this.managerRepository.findByName(name); if (manager == null) { Manager newManager = new Manager(); newManager.setName(name); newManager.setRoles(new String[]{"ROLE_MANAGER"}); manager = this.managerRepository.save(newManager); } employee.setManager(manager); }
Since there is so much repeated code, an advanced refactoring would be to have a single method adding the manager to Employee for both @HandleBeforeSave and @HandleBeforeCreate.
thanks
Hi,
Greg's tutorial is awesome. But when I follow the instruction, I do find that in Part two, the first section regarding "Turning on paging from the backend", it uses the code curl localhost:8080/api/employees?size=2 whose url is not quoted, which will cause "zsh: no matches found: localhost:8080/api/employees?size=2".
I use curl "localhost:8080/api/employees?size=2" and it works fine. Looks like it's a typo.
Hello!
I have some issues with running the first part of the tutorial. When I run it, the view is blank. I checked the web inspector and it tells me it is unable to load the bundle.js resource. I think it might have something to do with the webpack.
Maybe it has something to do with my IDE module settings?
Here is my pom.xml
`
4.0.0
<groupId>com.github.AustinSong</groupId>
<artifactId>BookExchange</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>
<name>BookExchange</name>
<description>web app for exchange of text books</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.3.2.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-rest</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.16.4</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.h2database</groupId>
<artifactId>h2</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</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>0.0.24</version>
<configuration>
<workingDirectory>src/main/resources/static</workingDirectory>
</configuration>
<executions>
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<configuration>
<nodeVersion>v0.10.33</nodeVersion>
<npmVersion>1.3.8</npmVersion>
</configuration>
</execution>
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<execution>
<id>webpack build</id>
<goals>
<goal>webpack</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
`
There's the error with web pack that I receive in the IDE. I'm using STS btw
How does implementing a navigation work in React.js in context to this tutorial? It seems that there is some kind of routing at the end of the URL (http://localhost:8080/login) which could be used to load the appropriate components.
I have no idea :) and appreciate any support to understand how a navigation could work.
For example: two different tables loading data from two different endpoints
E:\git\tut-react-and-spring-data-rest>mvn install
[INFO] Scanning for projects...
[INFO] ------------------------------------------------------------------------
[INFO] Reactor Build Order:
[INFO]
[INFO] React.js and Spring Data REST - Basic
[INFO] React.js and Spring Data REST - Hypermedia
[INFO] React.js and Spring Data REST - Conditional
[INFO] React.js and Spring Data REST - Events
[INFO] React.js and Spring Data REST - Security
[INFO] React.js and Spring Data REST - Root
[INFO]
[INFO] ------------------------------------------------------------------------
[INFO] Building React.js and Spring Data REST - Basic 0.0.1-SNAPSHOT
[INFO] ------------------------------------------------------------------------
[INFO]
[INFO] --- frontend-maven-plugin:1.0:install-node-and-npm (install node and npm) @ react-and-spring-data-rest-basic ---
[INFO] Installing node version v4.4.5
[INFO] Copying node binary from C:\Users\kenny.m2\repository\com\github\eirslett\node\4.4.5\node-4.4.5-windows-x64.exe to E:\git\tut-react-and-spring-data-rest
\basic\src\main\resources\static\node\node.exe
[INFO] Installed node locally.
[INFO] NPM 3.9.2 is already installed.
[INFO]
[INFO] --- frontend-maven-plugin:1.0:npm (npm install) @ react-and-spring-data-rest-basic ---
[INFO] Running 'npm install' in E:\git\tut-react-and-spring-data-rest\basic\src\main\resources\static
[INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary:
[INFO]
[INFO] React.js and Spring Data REST - Basic .............. FAILURE [ 1.071 s]
[INFO] React.js and Spring Data REST - Hypermedia ......... SKIPPED
[INFO] React.js and Spring Data REST - Conditional ........ SKIPPED
[INFO] React.js and Spring Data REST - Events ............. SKIPPED
[INFO] React.js and Spring Data REST - Security ........... SKIPPED
[INFO] React.js and Spring Data REST - Root ............... SKIPPED
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 1.630 s
[INFO] Finished at: 2016-06-13T09:33:47+08:00
[INFO] Final Memory: 27M/183M
[INFO] ------------------------------------------------------------------------
[ERROR] Failed to execute goal com.github.eirslett:frontend-maven-plugin:1.0:npm (npm install) on project react-and-spring-data-rest-basic: Failed to run task:
'npm install' failed. java.io.IOException: Cannot run program "E:\git\tut-react-and-spring-data-rest\basic\src\main\resources\static\node\node.exe" (in director
y "E:\git\tut-react-and-spring-data-rest\basic\src\main\resources\static"): CreateProcess error=193, %1 不是有效的 Win32 应用程序。 -> [Help 1]
I followed your approach to build an application with slightly larger frontend.
Then there is a huge amount of files under node_modules which causes my IDE hang during compiling.
I think it might be a good idea just to put the built/bundle.js under resources, and keep other stuff in the src code directory.
I was looking at this guide (https://spring.io/guides/tutorials/react-and-spring-data-rest/) and followed it by copy pasting the code into IntelliJ, however when IntelliJ tried to auto imported the dependencies, It showed multiple dependencies for @id and @entity Annotations. It would be nice to include those import statements in the sample code itself, instead of letting a beginner guess.
Kindly provide Gradle instructions. I'm not sure how to set up webpack, babel, ract.js and rest.js.
We are having a restricted environment where downloads are restricted and also uses a private nodejs repo. Because of this reason, we are not able to use this plugin as is and I am guessing some customization might be needed in plugin config in pom file. Any help is greatly appreciated.
I am running into multiple issue when trying to configure it locally.
[ERROR] Failed to execute goal com.github.eirslett:frontend-maven-plugin:1.2:install-node-and-npm (install node and npm) on project react-and-spring-data-rest-basic: Could not download Node.js: Could not download /Users/rpotn/GIT/ReactSpring/basic/nodejs/v4.4.5/node-v4.4.5-darwin-x64.tar.gz: ClientProtocolException: Target host is not specified -> [Help 1]
[ERROR]
Cant to start basic modul with command
./mvnw spring-boot:run
Errors occurs on build process.
Does somebody know why it can be happened and how to fix this?
[INFO] --- frontend-maven-plugin:0.0.24:npm (npm install) @ react-and-spring-data-rest-basic ---
[INFO] Running 'npm install --color=false' in /Users/aleh/Development/samples/java/tut-react-and-spring-data-rest/basic/src/main/resources/static
[ERROR] npm WARN package.json [email protected] No README data
[INFO]
[INFO] --- frontend-maven-plugin:0.0.24:webpack (webpack build) @ react-and-spring-data-rest-basic ---
[INFO] Running 'webpack.js --no-color' in /Users/aleh/Development/samples/java/tut-react-and-spring-data-rest/basic/src/main/resources/static
[ERROR]
[ERROR] module.js:340
[ERROR] throw err;
[ERROR] ^
[ERROR] Error: Cannot find module 'assert/'
[ERROR] at Function.Module._resolveFilename (module.js:338:15)
[ERROR] at Function.require.resolve (module.js:384:19)
[ERROR] at Object.<anonymous> (/Users/aleh/Development/samples/java/tut-react-and-spring-data-rest/basic/src/main/resources/static/node_modules/webpack/node_modules/node-libs-browser/index.js:1:93)
[ERROR] at Module._compile (module.js:456:26)
[ERROR] at Object.Module._extensions..js (module.js:474:10)
[ERROR] at Module.load (module.js:356:32)
[ERROR] at Function.Module._load (module.js:312:12)
[ERROR] at Module.require (module.js:364:17)
[ERROR] at require (module.js:380:17)
[ERROR] at Object.<anonymous> (/Users/aleh/Development/samples/java/tut-react-and-spring-data-rest/basic/src/main/resources/static/node_modules/webpack/lib/node/NodeSourcePlugin.js:7:23)
[ERROR] at Module._compile (module.js:456:26)
[ERROR] at Object.Module._extensions..js (module.js:474:10)
[ERROR] at Module.load (module.js:356:32)
[ERROR] at Function.Module._load (module.js:312:12)
[ERROR] at Module.require (module.js:364:17)
[ERROR] at require (module.js:380:17)
[ERROR] at OptionsApply.WebpackOptionsApply.process (/Users/aleh/Development/samples/java/tut-react-and-spring-data-rest/basic/src/main/resources/static/node_modules/webpack/lib/WebpackOptionsApply.js:72:28)
[ERROR] at webpack (/Users/aleh/Development/samples/java/tut-react-and-spring-data-rest/basic/src/main/resources/static/node_modules/webpack/lib/webpack.js:22:48)
[ERROR] at processOptions (/Users/aleh/Development/samples/java/tut-react-and-spring-data-rest/basic/src/main/resources/static/node_modules/webpack/bin/webpack.js:152:17)
[ERROR] at Object.<anonymous> (/Users/aleh/Development/samples/java/tut-react-and-spring-data-rest/basic/src/main/resources/static/node_modules/webpack/bin/webpack.js:192:1)
[ERROR] at Module._compile (module.js:456:26)
[ERROR] at Object.Module._extensions..js (module.js:474:10)
[ERROR] at Module.load (module.js:356:32)
[ERROR] at Function.Module._load (module.js:312:12)
[ERROR] at Function.Module.runMain (module.js:497:10)
[ERROR] at startup (node.js:119:16)
[ERROR] at node.js:906:3
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 3.498 s
[INFO] Finished at: 2016-03-31T00:41:45+03:00
[INFO] Final Memory: 18M/228M
[INFO] ------------------------------------------------------------------------
[ERROR] Failed to execute goal com.github.eirslett:frontend-maven-plugin:0.0.24:webpack (webpack build) on project react-and-spring-data-rest-basic: Failed to run task: 'webpack.js --no-color' failed. (error code 8) -> [Help 1]
[ERROR]
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR]
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoFailureException
When you save an employee update on the front-end, you send an object containing the employee firstName, lastName and description. This is resulting in the manager property being overwritten with nothing.
When the update event is triggered the front-end errors because it cannot find the name of the now null manager.
According to #6, this should be the official and maintained version.
The latest react version of this tutorial is on react 0.13.3 while the latest production ready react version is 15.3.2.
Updating in this project the file package.json the version will result in these client error :
2016-09-23 13:47:07.939 http://localhost:8080/bower_components/react/JSXTransformer.js Failed to load resource: the server responded with a status of 404 (Not Found)
2016-09-23 13:47:07.943 require.js:140 Uncaught Error: Script error for "JSXTransformer/JSXTransformer"
http://requirejs.org/docs/errors.html#scripterror
2016-09-23 13:47:11.117 require.js:1952 GET http://localhost:8080/bower_components/react/JSXTransformer.js req.load @ require.js:1952context.load @ require.js:1679Module.load @ require.js:829Module.fetch @ require.js:819Module.check @ require.js:851Module.enable @ require.js:1177context.enable @ require.js:1550(anonymous function) @ require.js:1162(anonymous function) @ require.js:131each @ require.js:56Module.enable @ require.js:1114Module.init @ require.js:783(anonymous function) @ require.js:1453
2016-09-23 13:47:11.120 require.js:165 Uncaught Error: Script error for "JSXTransformer/JSXTransformer"
http://requirejs.org/docs/errors.html#scripterrormakeError @ require.js:165context.onScriptError @ require.js:1732
2016-09-23 13:47:18.129 require.js:165 Uncaught Error: Load timeout for modules: jsx/jsx!app_unnormalized2,jsx/jsx!app
http://requirejs.org/docs/errors.html#timeoutmakeError @ require.js:165checkLoaded @ require.js:693(anonymous function) @ require.js:714
Is there a proper to upgrade this ?
After running npm run-script watch, changes in app.js are not reflected in the browser after reloading. It seems webpack.config.js is not pointing at the correct output directory.
It worked after this change:
output: {
- path: __dirname,
- filename: './src/main/resources/static/built/bundle.js'
+ path: './target/classes/static/built/',
+ filename: 'bundle.js'
},It's getting quite tedious that I need to rerun ./mvnw spring-boot:run after I modified single line code in either java source code or javascript.
Any recommended way to enable hot reloading for both frontend and backend?
Could you please include test cases, definitely i can create a pull request, still before doing so, need suggestions.
Tutorial is a JS rich in nature, and JS test cases (Mocha/Chai/Sinon/Karma) integration is a welcome, with devtools, reloading generated js, as we develop.
Yes, i am aware, this too much too ask, still just a humble request.
I am pretty shy with anything with word JS in it, so would not be much use on above request stack. 😿
A standard way for the server to handle redirects to single page application?
Single Page applications have client-side routing. What is the standard/recommended way to handle such scenarios with Spring Security?
For example,
/api/* should be handled by controllers on serverindex.html
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.