Add option to build React webpart #12
Conversation
There was a problem hiding this comment.
Thank you for sharing @helenmiller16, we have discussed adding something along these lines internally before, but stopped short because we needed to figure out what that all meant for having multiple on the page together, etc. I'll add this as a topic to our next dev meeting to discuss.
| new HtmlWebpackPlugin({ | ||
| inject: false, | ||
| mode: 'dev', | ||
| name: entryPoint.name + "Dev", | ||
| title: entryPoint.title + " Dev", | ||
| filename: '../../../views/' + entryPoint.name + 'Dev.webpart.xml', | ||
| template: 'webpack/app.webpart.template.xml' |
There was a problem hiding this comment.
@helenmiller16 Were you able to get the hot module reloading, dev mode, working for the webpart using this approach. I just pulled down the PR and tried it but that Dev.webpart.xml just shows as blank. I would assume that the better option might be to continue to use the view itself for HMR and then just produce the webpart.xml for the non-dev mode version.
There was a problem hiding this comment.
@cnathe thanks for taking a look! Hmm, that's odd that it's not building, worked fine for me -- that's how I've been developing the React webpart I'm working on. As you mentioned, you wouldn't be able to load it on the page if the non-dev webpart is already there.
|
Excellent thanks @helenmiller16! This is a great starting point for us to make this a more widely used capability. Loading multiple react projects on the page at a time is a fairly complex render and I notice a couple render issues using this with the way our builds are setup now. Such as looks like only one instance of the webpart will render on the page at a time, for example if you add two of the HelloWorld webparts. As I recall, for your use case you are only having one instance of your webpart on the page so that doesn't sound like that will be an issue for you. But something we'll need to figure out before recommending others use this pattern. We're also working on providing common package dependencies that can be used by the modules to ensure there are not dependency conflicts, possibly for use cases like webparts. This may be a bit down the road however. It looks like you've made good progress on your use case, appreciate you passing along these templates and configs, that's very useful. Let us know if you have anything else you think might be useful for us to further the react webparts, or if you have any other questions or issues you want to sync up about. As Cory mentioned, we'll discuss this further ourselves this week to see what it will take to make this a more widely available feature. |
|
Also, as long as I only have one helloworld webpart instance the dev server does work for me. Don't need to go to a separate URL. Pretty cool! |
|
Thanks Marty, happy to hear it's working for you! So far it hasn't been a problem for us that we can't load multiple react components at once. One of the main reasons we wanted to build out our modules with webparts was so we could build them as purely file-based modules, as we're not currently set up for java development, and it's worked great for that. I'd love to follow up and hear your thoughts on some other things we've developed as part of our react-based modules, like d3 components and juggling multiple API calls. |
This is more-or-less what we did in ImmuneSpace to build our React apps in webparts. It's a bit different because we built them as purely file-based modules, but this seems to work as expected.