Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$
Light
Dark
System
Ask  Question

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


user
Kim Hvidkjaer 8 months ago
Metronic SASS React
3 Answers
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)

user
Lauris Stepanovs Author8 months ago

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


user
Kim Hvidkjaer 6 months ago

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


user
Lauris Stepanovs Author5 months ago

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