Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Metronic 8.2.1 + REACT


Hi,

I have purchased the Metronic theme. So far I was able to run all the REACT demos, but i do have a small suggestion: yarn.lock file tends to break 'yarn install', because of versioning issues. After removing the yarn.lock, the demos are running smoothly, as yarn.lock is being rebuilt.

I have question regarding the building the REACT application. I looked at this video:

https://www.youtube.com/watch?v=2uWJpnuCMKQ

This video explains HTML, but I'm using REACT. I've noticed that in REACT there is no 'tools' folder.

Question: does REACT demo1 (I like this demo) come with build tools, or do I have to manually 'clean' the demo and start from there? I'd like to start 'clean' and build on top of it, but it looks like 'layout builder' in REACT does not work as in HTML demo?

Best,
Matej


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)


Hi Matej,

Thank you for your feedback.

Unfortunately, we didn't manage to reproduce this problem in the latest Metronic version.
Could you please specify which Metronic version you are using?

The video you are referring to is for our HTML version and we do not have such a build video for React version. To run the app for development you can refer to the instructions on our quick start doc page to build theme for production refer to Vite official documentation.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi Lauris,

thank you for the quick reply.

As stated in the title, I'm using Metronic 8.2.1.

As far as I understand, I have to take demo1 (For React) for example and remove all the components to get to the 'skeleton' version?

Is this a correct approach, or is there a better one?



Hi Matej,

Sorry for the misunderstanding.

We will test this problem further. May I know your node version?

You can choose any demo out of 8 demos available in our React version. Many examples in the Metronic version are for demonstration purposes. You can customize the theme layout and pages according to your needs, and remove any unnecessary code.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi Lauris,

understood, thank you.

As per your question, I'm using Node version 20.10.0

Best,
Matej



Hi Matej,

Thank you for letting us know.
We will retest our theme with this Node version.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



I'm having the same problem. Has it been resolved yet?

slope


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(