Site with some issues and improvements

🙋Get Help
21

It shouldn’t be difficult once we add the server extensibility, which is one of our next steps because it’s needed for other packages as well. I think I’m going to be able to dedicate some time during this month. Once the server extensibility is ready, the "@frontity/material-ui" package should be really easy to do.

I will be able to give you instructions to create it yourself in case you want to get involved. But you cannot start until the server extensibility is ready.

1 Like
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?