The team is now working on the WordPress Interactivity API. This unblocks the same UX Frontity framework enabled but directly in WordPress Core, fully compatible with the new Site Editor.
i am quite new to react and frontity in itself aswell. At the moment i am trying to get material-ui for my frontity project to work. Today i have seen that material-ui needs to be prepared for a SSR-Framework.
My Problem is now, the index.ts at the moment looks completly different now than it was 2 years ago. I can’t seem to find a way to implement material-ui because of lack in knowledge.
I would gladly appreciate an example on how to do it. Also will frontity in the future officially make this feature happen by default someday?
mburridge2
Hi @Gno
Welcome to the Frontity community. It might be worth your while taking a look at this demo project which demonstrates the use of an external library - in that case it’s antd, but it should provide you with an example on how to integrate external libraries.
BTW you shouldn’t be making any changes to the core Frontity files. You should just work within your theme.
Gno3
Main problem is material-ui for react doesn’t use a global css stylesheet. i had some errors using the tab component with material-ui. It said that css classnames differ from server to client side. Thats why i thought you have to get material-ui to render on the server. Still don’t know how to do that. If somone could look at the Server Render Guide on the first post and give me a hint, that would be nice.
Sadly i can’t implement it like antd or bootstrap.
1 Like
Eiden4
I think the problem can be resolved in a clean way once:
has been resolved and we can use middlewares.
I experimented in the package/components/index.js file with extracting the css and adding it as a global style but with no success.
The guide to apply when integration material ui will be this one:
Looking for a solution for anything above: @frontity/core 1.11.0 as well. So far patching index.tsx the same/similar changes before 1.11.0 works
cristianbote6
Hi @Eiden and @francis,
Apologies for the missing documentation on the improved API for extending the server. This is part of the AMP package development, and since the package is not ready the documentation hasn’t been modified in that regard.
Anyways an example with the latest version, for doing custom Server Side Rendering for material ui would be something like I did in this CodeSandobx.
Let me know if there are more questions or that the above is clear enough in it’s approach.
Well … @cristianbote this is gotta be the most helpful CodeSandbox ever. Worked out of the box after core upgrade and integration into the theme. All one needs to do is pickup the beforeSSR code. Done
Maybe it would be a good idea to promote this a little better?
Thank you for your awesome work guys.
2 Likes
cristianbote8
Oh thank you @Eiden for your kind words!
Indeed that’s the plan we just need to finish-up the AMP package. The new APIs are game changer in terms of flexibility and what you one can do with frontity afterwards.
2 Likes
luisherranz9
Hey guys, this is awesome!
@cristianbote I have a question: Could the Material-UI CSS be injected in a way that the @frontity/amp package could pick it up to add it to the <style amp-custom> tag?
Apart from that, @eiden/@francis/@gno: would you be interested in maintaining a frontity-material-ui package? That way people willing to use Material-UI with Frontity would just need to install a package
As @cristianbote showed, the code is very simple so it should not be hard to maintain.
francis10
Sure. I haven’t had a chance to try it out yet but would love to help and contribute to the community.
we just need to finish-up the AMP package. The new APIs are game changer in terms of flexibility and what you one can do with 
