Site with some issues and improvements

šŸ™‹Get Help
23

Hello, my application needs to be deployed to live server and without this fix i wont be able to push it live

25

Hey @aeyzazkhan. If you need this feature right now, my recommendation is to do the SSR of Material UI yourself until we release the official package. You can either:

  • Fork @frontity/core.
  • Use something like patch-package to change the files.

This is the guide for SSR of Material UI: https://material-ui.com/guides/server-rendering/

The only @frontity/core file you need to change is: https://github.com/frontity/frontity/blob/dev/packages/core/src/server/index.tsx

Iā€™ve just tested it and it works great. You can see the changes you need to do in my commit:

The useEffect to delete the CSS on the client can be added in your own theme, it doesnā€™t need to be in core:

React.useEffect(() => {
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentNode.removeChild(jssStyles);
    }
  }, []);
1 Like
26

Thanks it worked, there are still a few elements that wont load properly could you please have a look http://staging.parlaybros.com/

29

Is this feature inbuilt yet instead of patching core?

30

Hey @furrysmile2, not yet but I think itā€™ll be possible once we do some changes required for the @frontity/amp package: AMP package, which is in ā€œUpcoming developmentā€ so coming soon :slightly_smiling_face:

Once weā€™ve done that work Iā€™ll come back here to see if itā€™s already possible or we have to expose more things.

1 Like
31

In console now I get this on post click link prop is required and it should be string, it says to come here but no issue doc

32

That warning seems to be from the Link component.

33

Can I move modified core to packages directory? or Does this mean we canā€™t use material-ui with Frontity on the Vercel?

34

You have to use something like https://github.com/ds300/patch-package from now.

35 
'document' is not defined. It shows this error on client
36

Urgent: frontity.style is no longer in index.ts because of your updates, so where to add this:

frontity.style = <style amp-custom>${emotion.css}</style> <style id="jss-server-side">${materialCss}</style> ;

37

@furrysmile2 I would just copy the file again (https://github.com/frontity/frontity/blob/dev/packages/core/src/server/index.tsx) and then add the style to the frontity object because it gets sent to the template.

As you can see, the frontity.style prop still exists in the template file: https://github.com/frontity/frontity/blob/dev/packages/core/src/server/templates/html.ts#L16

38

I might be a bit late into this but Iā€™m working on implementing Material UI.
I believe emotion.css also moved from index.tsx so curious if thatā€™s covered somewhere else and we can just put: ${materialCss}?

39

yes we can

40

Thanks. I got it actually working now and itā€™s working smoothly. Also added serverGenerateClassName to clean things up a bit.

41

this issue with correctly rendering material-ui in theme is solved with package ?

43

Yes just edit and run this https://github.com/ds300/patch-package

2 Likes
45

Just following up on this as there has been changes with the recent patch from core
ā€œ@frontity/coreā€: ā€œ^1.11.0ā€,

Is there an OOTB solution for Material UI SSR support now?

46

By any chance, you can provide a guide on how to do this since https://github.com/frontity/frontity/blob/dev/packages/core/src/server/index.tsx has changed?

47

@cristianbote has made a CodeSanbox explaining how to do this in this other thread: Integrate Material-UI server side rendered - #6 by cristianbote

Letā€™s continue the discussion there instead :slightly_smiling_face: