Use it on GatsbyJS? about ct-material-kit-pro-react

[zequnyu]

Hi @einazare ,

Thank you for your reply. I've tried it and would like to add a bit more details. I used the hello-world-starter which is provided by GatsbyJS officially. In the file package.json replace the dependencies with:

"dependencies": {
    "gatsby": "^1.9.277",
    "gatsby-link": "^1.6.46",
    "@material-ui/core": "1.5.0",
    "@material-ui/icons": "2.0.2",
    "@types/googlemaps": "3.30.11",
    "@types/markerclustererplus": "2.1.33",
    "ajv": "6.5.2",
    "animate.css": "3.7.0",
    "classnames": "2.2.6",
    "history": "4.7.2",
    "moment": "2.22.2",
    "node-sass-chokidar": "1.3.3",
    "npm-run-all": "4.1.3",
    "prop-types": "15.6.2",
    "react": "16.4.2",
    "react-animate-on-scroll": "2.1.5",
    "react-datetime": "2.15.0",
    "react-dom": "16.4.2",
    "react-google-maps": "9.4.5",
    "react-image-gallery": "0.8.10",
    "react-nouislider": "2.0.1",
    "react-parallax": "1.7.0",
    "react-router-dom": "4.3.1",
    "react-scripts": "1.1.4",
    "react-slick": "0.23.1",
    "react-swipeable-views": "0.12.16",
    "react-tagsinput": "3.19.0"
  }

Then remember to run npm install before gatsby develop. And it works. This can be closed for now.

[hennessyevan]

This does not work with gatsby v2

[hennessyevan]

Material UI and so also this component library is broken in Gatsby v2 gatsbyjs/gatsby#8237

[einazare]

Hello there @Cruzercru ,

Thank you for your interest in working with our products.
I do not know how to use Gatsby, actually, none of my colleagues have worked with Gatsby, and I do not know how to test this.
Could you provide me some steps on how to use Gatsby with our product?

Best,
Manu

[CruScanlan]

Hi @einazare ,
I have actually since got Material Kit React and Gatsby V2 to work seemingly flawlessly together.
The easiest way to get started with it is to use the Material UI example for Gatsby .
The main issue I was having with failed builds was my use of a layout system that called the withRoot inside of the layout component rather than at the root page component. If you do not call withRoot from the root of each and every page component, the JSS will fail to build correctly. You can see my implementation of this here at the final line.
Since Gatsby is server side rendered to produce static sites, all references to window first need to check if window is defined. You can see my implementation here.

I have made a lot of changes to my project but from memory, that should get everything working nicely together. I will make a new repository when I get time with a full implementation of the material kit react example inside of Gatsby that takes advantage of all Gatsby has to offer such as it's awesome image optimization. In the meantime feel free to reference my project here.

Edit: You can see an example of how incredibly fast this is with Gatsby: https://qldnativeseeds.com.au/

[CruScanlan]

I forgot to mention in my comment above that, while this will get everything to build and run in develop mode, hot reload is still not working correctly as @hennessyevan referenced. This is not Material Kit React's fault but rather something that Material UI will have to solve. Worst case scenario is occasionally you have to press the refresh button when in develop mode.

[einazare]

Hello @zequnyu ,

And thank you for your interest in using our product.
Since we do not know your project folder structure we can't really make a tutorial about that, and this isn't the only reason. What would happen if all of our clients would ask to make for each one of them a tutorial, we would not have time to develop new products and maintain those that we already have.
We are going to make some small tutorial on how to integrate some of our products with others, but since then here is a small description of what you should do to integrate it:
Let's say for example you want to take our cards in your project.

• Copy our dependencies in your project
• Go inside src/components/Card and copy all the files.
• Go inside src/assets/jss/material-kit-pro-react/components and copy
  • src/assets/jss/material-kit-pro-react/components/cardAvatarStyle.jsx
  • src/assets/jss/material-kit-pro-react/components/cardBodyStyle.jsx
  • src/assets/jss/material-kit-pro-react/components/cardFooterStyle.jsx
  • src/assets/jss/material-kit-pro-react/components/cardHeaderStyle.jsx
  • src/assets/jss/material-kit-pro-react/components/cardStyle.jsx
• Then go inside src/assets/jss and copy this file: src/assets/jss/material-kit-pro-react.jsx
• And that's it, you can now import our Card components in our application.
• You may need to change our imports from what we have (our folder structure) to you folder structure.
• If you want to add more of our components, you just do the above steps.

Hope this information helps you. If you need help in the process of your development we can recommend you some of our friends - since we are not doing client based projects.

Best,
Manu

[einazare]

Hello there @hennessyevan ,

Thank you for your interest in working with our product.
What does not seem to work with gatsby v2?
The product, or the above comment?

Best,
Manu

[CruScanlan]

Material Kit React works fine with GatsbyV2 in develop mode but when doing a production build, the styles are all completely wrong.