Integrate Material-UI server side rendered

Hello there,

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.

I looked at this guide provided by material-ui Server Rendering - Material-UI and found that there was an example of an integration in frontity on github like this: chore(core): example of how to add material ui support · frontity/[email protected] · GitHub

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?

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.

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

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:

We also had a conversation here: Site with some issues and improvements - #43 by furrysmile2 regarding Material UI.

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

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.

3 Likes

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

Oh thank you @Eiden for your kind words!

Indeed that’s the plan :wink: 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

Hey guys, this is awesome! :grinning_face_with_smiling_eyes::clap:

@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 :slightly_smiling_face:

As @cristianbote showed, the code is very simple so it should not be hard to maintain.

Sure. I haven’t had a chance to try it out yet but would love to help and contribute to the community.