Question : Does this support importing other React components from node Js

[kevzlou7979]

[pstockley]

Yes you can use existing React components implemented in JS. I will add some documentation giving an example of how to do this.

[kevzlou7979]

Ok cool thanks.

[ollwenjones]

We do it mostly, instead of staying tied to Java/GWT. We even have TypeScript + React + Webpack spitting out a UMD module that we invoke via JsInterop. This tool gave us the hookups to tie those in (so we aren't using a lot of this tool's other features.)

1. Make sure the component you want to use is exported
2. Import the module it's in via a JsInterop class
   1. Add a JsInterop Props class for the component
   2. Expose it in the JsInterop class that imports the module, via a getter.
3. Make a GWT "widget" that invokes the tools here to render the/a react component
4. Use it like any other GWT widget, just re-render when "props" change.

[pstockley]

@ollwenjones How do you do your development deploy's? I am looking into integrating webpack devserver and superdev mode so you can do instant updates of both javascript and java code.

[ollwenjones]

@pstockley what we have is adequate, though I'm sure there could be something more ideal. We do most react development in a webpack dev server, so we can take advantage of HMR, etc. Then we use a separate webpack build that publishes into the the GWT project's target directory, overwriting what would normally be loaded during non-dev build. This doesn't produce anything as slick as HMR obviously, but aside from the occasional need to hard-refresh away cached JS, it allows React code changes to be picked up during a refresh of the super-dev mode browser window, just like GWT client code changes.

One thing that feels "dirty" about it is the relative file paths between projects, but as maven / npm weren't really designed to play well together, we've been living with it for now.

[ollwenjones]

Per

integrating webpack devserver and superdev mode

IFAIK while super-dev mode seems to serve from the GWT projects target directory, webpack dev server hosts everything in memory and does not produce files on the file system at all, so I'm not sure there would be a way to integrate the two.

You could simulated it pretty easily by having two processes going, one running webpack dev server, and the other with the target-punching web-pack build running in "watch mode." We actually have an npm script to do this, but in practice don't need it much. It's usually either one or the other, but I can see how what kind of component/view etc. you are working on and how you get data into it for a particular use case could drive a different workflow.