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

Building SPA from Metronic 8


Hi there,

Thank you for a great product!

We're wanting to build a Single Page Application using Metronic. Do you have any pointers for where to start with this? We have the backend content ready, but would like some guidance on how to structure the app best, for optimal frontend performance and and responsiveness, as we really want to get loading-time down.

We plan to use your suggested ApexCharts and Datatables for charts / tables.

Thank you happy


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 (3)


Hi Kim,

Thank you for reaching out to us.

To start with Metronic React theme, check out our Getting Started docs page:
https://preview.keenthemes.com/metronic8/react/demo1/

We do not have any general recommendations for project structure and it should be done according to your project needs. However, we suggest using our default file structure for easier application of new Metronic releases. To optimize loading speed you can remove the dependencies you are not planning to use. Remember, Bootstrap dependency is mandatory and must be retained.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi Lauris,

Thank you!

So just to confirm - is the above metronic8/react demo is an SPA and a "best practice" starting point?

Best,
Kim



Hi Kim,

Yes, that's correct! This preview is our latest Metronic 8 React SPA version and it is the "best practice" starting point for your React application.

Regards,
Lauris Stepanovs,
Keenthemes Support Team


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  :(