geowarin / boot-react Goto Github PK

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.

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

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'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.

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'.

The localhost:3000 always show a green robo favicon, how do I change the icon?

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!

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 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

When I set config.timeout really low to test what happens when the the timeout is reached I get:

and it seems that the "status = cancelled" isn't catched.

Add a docker-compose.yml with redis and allowing to scale the webapp

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.

Could you please add support for bootstrap and css? Thanks.

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.

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]

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));
  }

@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 working on integrating https://github.com/Legitcode/tests.
I'm waiting for some improvements in the API: Legitcode/tests#23 and Legitcode/tests#24

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.

GET /api/session will not work if you haven't provided JedisConnectionFactory Bean according to the EnableRedisHttpSession docs.

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?

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 ?

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.

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?

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.

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.

https://stackoverflow.com/questions/55231642/the-user-is-not-logged-out-when-using-react-and-spring-boot

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?

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?

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!

How do i support OAuth2 in the project

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]

gradle stop,but nodejs not stop, Only pkill -9 node