Hi Wizards,
I have been building this site with frontity
but i am having a few issues
You can check this in console after sign in.
Thanks!
Thank you!
Nothing on this? The site takes too long to load. All i am doing is fetching menu from backend in SSR
Sorry, I’ve been super busy. Taking a look right now.
First of all, you’ve published the “development” version instead of the “production” version. I don’t know if that’s intentional, but just in case:
npx frontity dev
npx frontity build
You should do npx frontity dev when you are developing in your computer because you’ll get proper error messages, autorefresh (HMR) and so on. But once you want to upload your code to production, use npx frontity build. If you need to run Frontity in a Node server (instead of deploying to a serverless service) use npx frontity build && npx frontity serve.
You can distinguish between both versions because the development version tries to connect to a webpack endpoint: http://staging.parlaybros.com/__webpack_hmr and because the main javascript bundle is much bigger (10Mb in your case).
Apart from that, I see that
1. The CSS in the SSR is not working properly.
The content seems to be there, but for some reason the CSS doesn’t work until the JavaScript bundle is loaded.
Could you please paste here an example of your CSS? Are you using styled?
2. The menu doesn’t appear in the SSR
Could you please paste here the code of your menu and how are you adding it to the theme?
Do you want to style all pages or a specific page?
For all pages, you can create a <Page> component.
<Main>
{(data.isFetching && <Loading />) ||
(data.isArchive && <List />) ||
(data.isPage && <Page />) || <-- Add a component for pages
(data.isPostType && <Post />) ||
(data.is404 && <Page404 />)}
</Main>
If it’s a specific page and you know the id or the url, you can use that:
<Main>
{(data.isFetching && <Loading />) ||
(data.isArchive && <List />) ||
(data.isPage && data.id === 17 && <Page17 />) || <-- Add a component for page 17
(data.isPostType && <Post />) ||
(data.is404 && <Page404 />)}
</Main>
I am using Material UI here and creating styles using MakeStyles
const useStyles = makeStyles(theme => ({
root: {},
mainFeaturedPost: {
position: 'relative',
backgroundColor: theme.palette.grey[800],
color: theme.palette.common.white,
marginBottom: theme.spacing(4),
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
borderRadius: '10px',
width: '100%'
},
overlay: {
position: 'absolute',
top: 0,
bottom: 0,
right: 0,
left: 0,
backgroundColor: 'rgba(0,0,0,.3)',
borderRadius: '10px'
},
mainFeaturedPostContent: {
position: 'relative',
padding: theme.spacing(3),
[theme.breakpoints.up('sm')]: {
padding: theme.spacing(6),
paddingRight: 0,
}
},
leftSection: {
padding: '5px'
},
headingWithBorder: {
paddingBottom: '5px',
borderBottom: '6px dashed #ffc700',
},
twitterEmbed:{
padding:'2em'
},
embedMargin: {
marginBottom: '1em',
padding:'30px',
background: 'rgb(0,0,0,0.1)'
}
}));That is intentional, as i regularly pull the project code from my git.
Ok, but make sure to switch to production once the site is published!
It looks like Material UI requires some additional configuration for server side rendering:
I’ve added a "@frontity/material-ui" package to our roadmap in order to solve this.
is there any solution that can solve this problem, as this site going to be live very soon and need to fix this issue.
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.
Hello, my application needs to be deployed to live server and without this fix i wont be able to push it live
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:
@frontity/core.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);
}
}, []);
Thanks it worked, there are still a few elements that wont load properly could you please have a look http://staging.parlaybros.com/
Is this feature inbuilt yet instead of patching core?
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 
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.
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