Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • 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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(