Hello world
geowarin / boot-react Goto Github PK
View Code? Open in Web Editor NEWA starter application with spring boot and react
License: MIT License
A starter application with spring boot and react
License: MIT License
Hello world
Hello geowarin,
First of all I really appreciate your work. I am having a java script exception running your project ie: "Error: Cannot find module "../../../assets/stylus/main.styl". I saw that you have hard coded this string to show with exception. Can you help me resolve the problem. Your dicst/main.js is showing in a single line I cant figure out the issue.
Thanks
Is it known issue??
./gradlew bootRun
2018-05-30 22:09:45.922 ERROR 25447 --- [ restartedMain] org.zeroturnaround.exec.ProcessExecutor : Could not start process:
java.io.IOException: Cannot run program "yarn" (in directory "../frontend"): error=2, No such file or directory
at java.lang.ProcessBuilder.start(ProcessBuilder.java:1048) ~[na:1.8.0_171]
at org.zeroturnaround.exec.ProcessExecutor.invokeStart(ProcessExecutor.java:977) [zt-exec-1.9.jar:na]
at org.zeroturnaround.exec.ProcessExecutor.startInternal(ProcessExecutor.java:950) [zt-exec-1.9.jar:na]
at org.zeroturnaround.exec.ProcessExecutor.execute(ProcessExecutor.java:890) [zt-exec-1.9.jar:na]
at react.dev.YarnRunner.yarnCheck(YarnRunner.java:67) [main/:na]
at react.dev.YarnRunner.startFrontend(YarnRunner.java:55) [main/:na]
at react.dev.YarnRunner.run(YarnRunner.java:39) [main/:na]
Dear followers,
I've been thinking about migrating the project to create-react-app.
Pros:
The frontend build dependencies would be managed by a facebook maintained project
This means that the project will follow all the good practice identified by the community more or less automatically
Cons:
It would hide the nitty-gritty details of the build system from you
Please vote with ๐ in favor of CRA and ๐ if you want to keep the build as-is.
You're welcome to comment if you want to give more insights.
Hi!
I'm sory for really dumb question but I have ERROR in Cannot find module 'stylus'
when I try to import 'stylus/main.styl' and run bundle then. If the stylus is installed globally npm install -g stylus
nothing changes, same error. But if I install it locally npm install --save-dev stylus
another error arrive:
at tryCatchReject (D:\github\oauth2tester\frontend\node_modules\stylus-loader\node_modules\when\lib\makePromise.js:840:30)
at runContinuation1 (D:\github\oauth2tester\frontend\node_modules\stylus-loader\node_modules\when\lib\makePromise.js:799:4)
at Fulfilled.when (D:\github\oauth2tester\frontend\node_modules\stylus-loader\node_modules\when\lib\makePromise.js:590:4)
at Pending.run (D:\github\oauth2tester\frontend\node_modules\stylus-loader\node_modules\when\lib\makePromise.js:481:13)
at Scheduler._drain (D:\github\oauth2tester\frontend\node_modules\stylus-loader\node_modules\when\lib\Scheduler.js:62:19)
at Scheduler.drain (D:\github\oauth2tester\frontend\node_modules\stylus-loader\node_modules\when\lib\Scheduler.js:27:9)
at nextTickCallbackWith0Args (node.js:420:9)
at process._tickCallback (node.js:349:13)
@ ./src/ui/container/App.js 21:0-48
I have the same webpack.config.js, .babelrc and dev dependency on style-loader, stylus-loader, stylus. Can you give me a clue what's wrong? Thanks in advance!
Thanks for this repo, it helped a lot getting started with setting up spring and react!
Here's a question though: When running the frontend app using npm start
, hot module replacement does not work when editing UI components:
process-update.js:59 [HMR] The following modules couldn't be hot updated: (Full reload needed)
- ./src/ui/Component.js
Is this a known issue in this starter app?
Great repo .... love how it demonstrates a lot of stuff (react / spring boot / hot reloading / redux / ....)
I had a question on the software distribution part of the frontend code using npm.
Imagine at some point you want to wrap the frontend in an npm package and publish it to the npm registry (to do your webapp software distribution using npm)
When doing an npm pack
, you can generate a tarball that would correspond to the tarball that would get uploaded to the npm repo when doing an npm publish
By default, npm publish will publish all files unless you specify a files
property in your package.json
, but it will also include all your package.json dependencies
.
This will result in the following :
MacBook-Pro-3:frontend ddewaele$ npm pack
boot-react-frontend-0.0.1.tgz
MacBook-Pro-3:frontend ddewaele$ tar -tvf boot-react-frontend-0.0.1.tgz
-rw-r--r-- 0 501 20 1907 Feb 27 23:21 package/package.json
-rw-r--r-- 0 501 20 376032 Feb 27 22:59 package/dist/bundle.js
-rw-r--r-- 0 501 20 3256598 Feb 27 22:59 package/dist/bundle.js.map
-rw-r--r-- 0 501 20 184 Feb 27 22:59 package/dist/index.html
-rw-r--r-- 0 501 20 13087 Feb 27 22:59 package/dist/styles.css
-rw-r--r-- 0 501 20 87 Feb 27 22:59 package/dist/styles.css.map
-rw-r--r-- 0 501 20 3880 Feb 27 22:49 package/node_modules/history/package.json
-rw-r--r-- 0 501 20 3154 Dec 7 20:47 package/node_modules/history/README.md
-rw-r--r-- 0 501 20 673 Feb 4 19:35 package/node_modules/history/es6/Actions.js
-rw-r--r-- 0 501 20 4790 Feb 4 19:35 package/node_modules/history/es6/createBrowserHistory.js
-rw-r--r-- 0 501 20 918 Feb 4 19:35 package/node_modules/history/es6/createDOMHistory.js
-rw-r--r-- 0 501 20 6864 Feb 4 19:35 package/node_modules/history/es6/createHashHistory.js
-rw-r--r-- 0 501 20 7695 Feb 4 19:35 package/node_modules/history/es6/createHistory.js
-rw-r--r-- 0 501 20 985 Feb 4 19:35 package/node_modules/history/es6/PathUtils.js
-rw-r--r-- 0 501 20 3819 Feb 4 19:35 package/node_modules/history/es6/createMemoryHistory.js
-rw-r--r-- 0 501 20 271 Feb 4 19:35 package/node_modules/history/es6/deprecate.js
-rw-r--r-- 0 501 20 209 Feb 4 19:35 package/node_modules/history/es6/enableBeforeUnload.js
-rw-r--r-- 0 501 20 184 Feb 4 19:35 package/node_modules/history/es6/enableQueries.js
-rw-r--r-- 0 501 20 1139 Feb 4 19:35 package/node_modules/history/es6/index.js
-rw-r--r-- 0 501 20 139 Feb 4 19:35 package/node_modules/history/es6/ExecutionEnvironment.js
-rw-r--r-- 0 501 20 537 Feb 4 19:35 package/node_modules/history/es6/runTransitionHook.js
-rw-r--r-- 0 501 20 2132 Feb 4 19:35 package/node_modules/history/es6/DOMUtils.js
-rw-r--r-- 0 501 20 4161 Feb 4 19:35 package/node_modules/history/es6/useBasename.js
-rw-r--r-- 0 501 20 1908 Feb 4 19:35 package/node_modules/history/es6/DOMStateStorage.js
....
As you can see it packages up the dist folder (the "binary" part of the webapp that you in fact want to distribute), but it also packages all the node modules. (your dependencies)
When doing an npm install -g
of your webapp, npm will pull in all of its dependencies, and as these dependencies have already been included in the dist bundle.js by webpack, that didn't seem to make much sense that npm would need to pull them in again during an npm install -g
.
I had some discussions about this with some colleagues, and the only solution (or workaround) I see is to declare all dependencies as devDependencies. (Node will not install devDependencies when installing a node package).
At this point you don't really need these node modules anymore (as you are distributing a webapp that has already been webpacked). You simply need to distribute your dist folder.
What is your idea on that ?
Add a docker-compose.yml with redis and allowing to scale the webapp
I'm trying to run the project on OSX Sierra 10.12.6
Installed jdk8, maven, gradle and yarn with homebrew
Yarn command is available to be used on my terminal but it is throwing the following exception
Caused by: java.io.IOException: Cannot run program "yarn" (in directory "frontend"): error=2, No such file or directory
at java.lang.ProcessBuilder.start(ProcessBuilder.java:1048) ~[na:1.8.0_144]
attached log after execute ./gradlew bootRun
bootRun.log.txt
Maybe I missed some step before. Please help.
Hey,
Thanks a lot for this great "starter" application. Since I'm very new to all of this I have a small quastion:
What do we need to add so we can access static files like images?
I noticed that CSRF is disabled in the code. I know there are a number of code snippets out there to add csrf support to angular etc. Does this require glue code as well? I am looking at a number of various front-end javascript frameworks to overhaul our current web based product manager and this example is pretty comprehensive.
Hi,
First of all, great job! Thanks!
I've question regarding missing resources resolution, SinglePageAppConfig class in particular.
First of all, please replace orElseGet(null)
with orElse(null)
. orElseGet
will throw NPE when null is passed whereas orElse
will return null
.
Secondly, you wrote that if a requested view is not found it should be redirected to index.html
. It will not work. some.html
is handled - according to extension - then it's not found and null will be returned - this is how resolve
method logic works now.
Hello,
I cloned the repo and made some modifications to the code. Upgraded a few versions in the package.json. After doing this, I noticed that the /logout wasn't working correctly for the production build.
I'm wondering what's the best approach to generically handle async state in combination with react-router
and redux
for showing a loading spinner during backend requests.
Do you have any recommendations?
Since this is a starter project, it would be nice if we could use a generator to setup up a working environment instead of having to git clone
the repo.
I'm currently looking at lazybones, which is really cool.
@geowarin good work in this starter kit! Thanks!
I would like to suggest to add server rendering to improve SEO and first load.
One good reference is this article: http://winterbe.com/posts/2015/02/16/isomorphic-react-webapps-on-the-jvm/
I'm trying to test the privateRoute
component to make sure redirectToLoginWithMessage
is called and the loader is rendered when not authenticated etc.
I've managed to test the components markup, but i can't find a way to test the call to redirectToLoginWithMessage
.
Here`s what i have so far:
import { describeWithDOM, mount } from 'enzyme';
import { expect, spy } from '../../utils/chai';
import { createStore } from 'redux';
import React from 'react';
import privateRoute from 'router/privateRoute';
import { PrivatePage } from 'ui/PrivatePage';
import initStore from 'config/store';
describeWithDOM('<PrivatePage />', () => {
it('should render loader when not authenticated', () => {
const WrappedRoute = privateRoute(PrivatePage);
const store = initStore();
const component = mount(<WrappedRoute store={store}></WrappedRoute>);
// if the state is unauthenticated, loader should be visible and the
// private component should not be there
expect(component.find('.loader')).to.have.length(1);
expect(component.find('.privatePage')).to.have.length(0);
// TODO: how can we test that `redirectToLoginWithMessage` has been called?
});
);
});
In your ComponentTest you are importing the stateless component, so you're able to inject the action under test as a prop. But how does this work for connected components such as the privateRoute
?
Getting Error with gradle install :
gradle install --stacktrace
FAILURE: Build failed with an exception.
* Where:
Build file 'D:\codebase\POC\boot-react\backend\build.gradle' line: 17
* What went wrong:
A problem occurred evaluating project ':backend'.
> Failed to apply plugin [class 'io.spring.gradle.dependencymanagement.DependencyManagementPlugin']
> Could not create task of type 'DependencyManagementReportTask'.
Could you please add support for bootstrap and css? Thanks.
Hello! I don't understand how to run project with profile. I did
gradle -Dspring.profiles.active=webpack,fake-redis bootRun
but http://localhost:3000 not found. gradle frontend:start
and gradle backend:bootRun
works
Running ./npmw start
to start the front end results in
[HPM] Proxy created: /api -> http://localhost:8080
Listening at http://localhost:3000
webpack built 3712394563d553f55d98 in 1104ms
Hash: 3712394563d553f55d98
Version: webpack 1.15.0
Time: 1104ms
Asset Size Chunks Chunk Names
bundle.js 246 kB 0 main
chunk {0} bundle.js (main) 76 kB [rendered]
[0] multi main 40 bytes {0} [built] [1 error]
[1] (webpack)-hot-middleware/client.js 6.68 kB {0} [built]
[2] (webpack)/buildin/module.js 251 bytes {0} [built]
[3] ./~/strip-ansi/index.js 161 bytes {0} [built]
[4] ./~/ansi-regex/index.js 135 bytes {0} [built]
[5] (webpack)-hot-middleware/client-overlay.js 1.82 kB {0} [built]
[6] ./~/ansi-html/index.js 4.26 kB {0} [built]
[7] ./~/html-entities/index.js 231 bytes {0} [built]
[8] ./~/html-entities/lib/xml-entities.js 2.99 kB {0} [built]
[9] ./~/html-entities/lib/html4-entities.js 6.59 kB {0} [built]
[10] ./~/html-entities/lib/html5-entities.js 49 kB {0} [built]
[11] (webpack)-hot-middleware/process-update.js 3.88 kB {0} [built]
ERROR in Cannot find module 'babel-core'
@ multi main
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 577 kB 0
chunk {0} index.html 540 kB [rendered]
[0] ./~/html-webpack-plugin/lib/loader.js!./assets/index-template.html 475 bytes {0} [built]
[1] ./~/lodash/lodash.js 540 kB {0} [built]
[2] (webpack)/buildin/module.js 251 bytes {0} [built]
I'm curious if you've thought of going one step further and making the frontend app a standalone Node/React/Express application that taps a Spring Boot REST API for data whilst sharing the same authentication mechanism (session, jwt, oauth2, etc.)?
I've seen nearly all of the React + Spring Boot examples floating around the web and they all end up getting bundled into the Spring Boot JAR at the end. This project has the nicest separation I've seen no doubt, but was looking for a fully separate UI and API services.
I saw the yarn install in build.gradle has been changed to yarn_Install,
however the gradle frontend build command in readme is still "./gradlew frontend:yarnInstall",
I think you should change it to ./gradlew frontend:yarn_Install
the project is fantastic, thank you!
The localhost:3000 always show a green robo favicon, how do I change the icon?
ERROR in ./src/index.js
Module build failed: SyntaxError: Unexpected token (5:16)
3 | import App from './App';
4 |
> 5 | ReactDOM.render(<App />, document.getElementById('root'));
| ^
6 |
This fix worked for me on Windows.
private ProcessExecutor command(String... cmd) {
if (isWindows()) {
List<String> args = new ArrayList<>(Arrays.asList("cmd", "/c"));
args.addAll(Arrays.asList(cmd));
return new ProcessExecutor().command(args);
}
return new ProcessExecutor().command(Arrays.asList(cmd));
}
Right now we are waiting for the backend to respond to a first request (is the user logged in?) before displaying anything on the client.
This method has the advantage of being straightforward: we can use the info returned by the server as the initial state.
However, it adds latency to the first render, which is pretty bad.
If you have ideas or propositions to improve this, I'll be happy to discuss them.
gradle stop,but nodejs not stop, Only pkill -9 node
The gradle node plugin will automatically install the correct version of npm to build the project.
However, we still require users to install their own version of node/npm to run the frontend in dev mode.
I will keep an eye of the node wrapper discussed here, looks promising.
I'm working on integrating https://github.com/Legitcode/tests.
I'm waiting for some improvements in the API: Legitcode/tests#23 and Legitcode/tests#24
I'm wondering how others handle proper 404 status responses from the backend. With the current setup, the SinglePageAppConfig simply returns the index.html with an http status of 200 for each url.
My current idea is to duplicate the route configuration and whitelist all available routes in this class and return 404 for everything else, but this is error prone.
How are others handling this scenario?
GET /api/session will not work if you haven't provided JedisConnectionFactory Bean according to the EnableRedisHttpSession docs.
How do i support OAuth2 in the project
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.