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

Metronic 8.2.4 + REACT + Problem deploy version


I have a problem, I have already tried to publish the code generated by yarn build, I have already placed the site on firebase hosting and also on vercel, and neither of them loads the site. Only locally is it working using yarn dev.

I also followed the VITE step by step to deploy, but it still isn't working, the loading screen appears quickly and then doesn't show anything else.

https://vitejs.dev/guide/static-deploy.html

metronic react 8.2.4 demo1
node v20.5.0


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 Bruno Machado,

Thank you for reaching out to us.

Please note that by default, our previews are served under /metronic8/rect/demo1/, when you deploy Metronic on your server, you should update base property up to the path on your server in file vite.config.js. If you do not have a nested folder on your server then you can set base path to /.

You can read more about this property in the official documentation: https://vitejs.dev/guide/build#public-base-path.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi Lauris Stepanovs, thanks for the quick response, yes I had already made that change in vite.config, but it still doesn't work.



Hi Bruno Machado,

Do you have any errors in your browser console?

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Apparently no error, but in the network tab, it keeps loading something that never returns. Follow the production link below.

https://vite-six-xi-71.vercel.app/



Hi Bruno Machado,

It's difficult to determine the exact cause of this problem without debugging.

The Vite documentation provides detailed instructions on deploying a Vite application to Firebase. Please ensure you have followed these steps correctly: Vite Deployment Guide for Firebase.

Additionally, I suggest testing your build locally before deployment. You can run the production build locally with the command npm run preview.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi Lauris Stepanovs, thank you very much for your help. I appreciate it.


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