I have a style guide for a react web component library
When loading the base URL, the sections load as expected and everything works.
When I load the base URL/index.html (e.g. by switching back to "Components" after loading "Layers" in the top right tabs), the same page should be loaded, but the web component fails to load with no errors. When checking out the examples, errors are thrown, presumably because they can't access the web component.
My guess is some adjustments should be made in the style guide config. Does anyone have any hints? I am fairly new to web components, so I am pretty much in the dark atm
Thanx
Related
This might be a silly question, but after reading many documents, I am still not sure. I know there are 3 main types of rendering:
Sever side rendering (render at request time)
Client-side rendering (render on client side)
Static site generation (render at build time)
I have some experience with Next JS, and I know you can choose which rendering type you want for a page in Next JS.
However, for React JS, from what I read here and there, it seems to be client-side render. But when I host a React webpage (say on S3), I would build it first and host the generated static contents on S3. Doesn't this mean React JS fall into the static site generation category? What is the "build action" doing anyway, and how is it different from rendering?
When you write your code you more than likely seperate your concerns and components into different files. With react you likely have a .js file for each component, you may also have a .css file etc etc. This is great for organising workflow, but not idea for a production app.
When you "build" your project, react takes all these files and merges them together and optimises for fast page loading. You are left with a build directory which contains the files ready for deployment.
Rendering happens as the page is loaded. It is the process of react determining what the UI will look like by checking what components need to be loaded and what state they are in.
so I've got a React app being served by Nginx and it uses an API server backend to which the NGINX server forwards requests, which is consumed by the React App. The react app uses the React Router package for routing.
Most of the react app is pretty simple, when you go to a specific page, it mounts a React Component which fetches some data from the API Server, and then updates itself to display that data. In doing so, it also updates the Document Title and other metadata related to the data that was fetched.
The react app is just a basic Create-React-App scaffolded application and the NGINX config is just pointing and the default index.html (which in turn loads the javascript chunks etc, standard React infrastructure).
I have a problem now where the app generally works well but if you copy a link from the app and paste it to someone, it will always show the base title of the application, and indeed if you preview the HTML source of any page on the webapp, it will always show the base title.
Here is an example (although SO doesn't do metadata link previews afaik):
https://bugwalker.io/bugs/92
My guess is that the requests that fetch metadata for a link, or fetch source page, don't have Javascript enabled and as a result it never mounts the react components and never gets to update the title etc.
Is there a way to fetch the metadata to populate the title and other metadata even when javascript is disabled? Or is there something else going on that I am completely missing?
Thanks in advance!
For this you need react helmet: https://github.com/nfl/react-helmet. On each page of your React application you should specify the title like so:
<Helmet>
<title>Some Page</title>
</Helmet>
I am building a website using Express and React. I go with Server-side rendering
Now I am looking for a solution to hydrate my final HTML.
The issue is at the build time, the page is still not available. A page only started with a main component and Express middlewares can add/remove sub-components to that main component. It means we only know what is the final structure of the page at the end of the request
Is there any way I can hydrate that page and make React available in the client browser?
Thank you so much
If I create a JSS react component and import it into Sitecore, can I add it to my Available Renderings in my SXA site and then add it to a page in my SXA site or vice-versa (i.e. add an SXA component to a page in my JSS Page?)
I tried doing that although the component shows up successfully when I try to add the component to my SXA page in Experience Editor, I cannot see the component on the page, after I associate the Data content with it.
You definitely can combine SXA and JSS, but the most common use case would be at an app level, not necessarily at a component level... As you would normally just build out the component with the framework you are using.
You can look through the docs on managing JSS apps within an SXA site to get more of an idea how it would work Here
Depending on your server setup and taking into account that the Experience Editor behaves very differently with JSS than it would when viewing the live site, I don't think anyone could give you the right direction here.
To get some proper advice and if you are actually doing this the guys in the sitecore slack would be keen to help:
Slack Request Form
After refreshing the page (and going through my ssr) it looks like none of the css is sustained unless I navigate through my app and get back to it Or even click some elements. Are there any examples of how this is done correctly?
Im using the exact same code from the controlled 'react material ui grid' example:
https://github.com/kkotwal94/DrivingService (develop branch) <- where the component is under components / demoBase, and the SSR is under server/render/pageRender.jsx. I use the material ui example for how this is done. I utilize demo grid in Students.jsx.
Here is a pic of what happens post refresh:
Everything else renders fine (all other pages) in production mode and dev mode. I have no clue what im missing here. It looks like the jss-in-css is mapping incorrectly.
I found that reverting back to pre-React 16 everything began to work again SSR and what not, however i cant use dx-react-grid project since it requires 16. Kind of in a wackamole, still investigating where i goofed.
TEST
http://transportation.kkotwal.me/
I hosted it, if you click on login you can log in with yea#yea.com, password: 123, or you can just sign up where the username has to be a email it doesnt matter. After wards if you navigate to the students button on the navigation (if you click on transportation tracker after logging in you should be back to the root page / view). You will see the dev extreme controlled grid example.
If you hit refresh on that page you will see all the css is messed up. In case you arent sure what the page is: http://transportation.kkotwal.me/students. The source is here: https://github.com/kkotwal94/DrivingService/tree/UpdateReact . The server side rendering is located https://github.com/kkotwal94/DrivingService/tree/UpdateReact/server/render. The component for the devExtreme component is called DemoBase.jsx in the components folder, and the container that renders this is https://github.com/kkotwal94/DrivingService/blob/UpdateReact/app/containers/students/Students.jsx.
I guess you're already aware that React 16 came with lots of improvements to server-side rendering. The update came with additional server-side render methods like renderToNodeStream().
The official guide on upgrading React from 15 to 16 mentions that it should have no issues, with minor exceptions. One of those exceptions is a break change exactly when you hydrate a server-rendered container:
Hydrating a server-rendered container now has an explicit API. If you’re reviving server-rendered HTML, use ReactDOM.hydrate instead of ReactDOM.render. Keep using ReactDOM.render if you’re just doing client-side rendering.
Having that in mind, I'd search in your project (and possibly in third-party libraries as well) for some ReactDOM.render that was missed to be changed to ReactDOM.hydrate while upgrading React to version 16.
this is probably the issue at server side code and your nodejs script.
Reason #1:
if you are using material ui version 4.x then you should look at their ssr documentation
in material ui version 3.x or below that we use
JssProvider from 'react jss/lib/JssProvider';
however this is no more required, your both github links are broken , kindly check ssr code of yours and compare it with material-ui documentation
Reason #2:
you have to refer to your build folder for your expressjs
app.use(express.static(path.join(__dirname, '../../build')));
app.use(express.static(path.join(__dirname, 'public')));
this could be another reason and if this is missing then check that your componentDidMount also will not be invoked, so client side rendering won't be happening, however for ssr both client side and server side rendering has to happen
For complete code on SSR kindly refer this link