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

REACT Installation


I am new to react, and am having some issues getting this project started.

I followed the quick start guide, only to run into a few issues.

First it looks like I have a typescript dependency conflict. I tried to work around it by downgrading typescript with this command: npm install typescript@4.9.5 --save-dev

Then I ran npm install again and got a few warnings, but was able to then run npm run dev

However, I can't get anything to run when I try to view the site on my web server.

The index.html file has a few includes that don't point to the correct direction. There was now dist folder created, not sure if that is still the way Metronics works?

Are there any documentation tutorials on fully setting this up? Do I need to move folders around outside of my public folder? I would really appreciate the help to get this up and running.

Thanks.


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


Hi,

Thank you for reaching out to us.

The typescript should be installed by default. Could you please specify which Metronic version you are using?

By default, our previews are served under /metronic8/react/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



Thank you for the reply,

I have version 8.2.1 right now
I unzipped the metronic_react_v8.2.1_demo1 folder and uploaded the entire contents to my subdomain where I want to start working on my app. https://aa.sitename.com

I then ran the npm install and npm run dev in the terminal on my server.

I did try to update the base to "/" in the vite config file, but I still wasn't able to get the demo to work.

Would it make more sense to put these files outside of my public folder and then move certain files to the public folder of my app (subdomain) and update the vite base to the subdomain path?

I do have plenty of knowledge with programming, but I'm still working on server setup type stuff and am also new to react.

I really appreciate your help. The Metronic theme you guys put together looks amazing and I cant wait to use it.

Thanks



Hi,

Do you have any errors when try to deploy your app?

You can find guides on deploying your app on different services in Vite's official docs.
https://vitejs.dev/guide/static-deploy

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