Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI
Light
Dark
System
Ask  Question

Start project with Vitejs + Reactjs + Metronic 8


Hello,

I am a french beginner developer and I have purchase a metronic license.
For a project, I really need to use vite js, react js and metronic 8.

I am aware that you have not integrated react with metronic 8, but now I am really lost and inexperienced...

I have been trying for 1 week now, but unfortunately without success...

I tried to start from a vite project with a react template and to integrate metronic 8.
I tried to start from the demo1 react provided by metronic 8 and to migrate to vite.

Starting from a vite project with a basic react template and I would just like to know which dependencies, folders and files are mandatory to make the application work and start using the features of metronic.

Thanks in advance and sorry for the inconvenience


user
maxence millescamps 2 years ago
Metronic React Bootstrap 5
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
Carmelo D 2 years ago

Try to check src/_metronic/helpers/AssetHelpers.ts for basic images and background. For the svgs, you have to fix src/_metronic/helpers/components/KTSVG.tsx file.

Regards,
Keenthemes support


user
maxence millescamps 2 years ago

Hello,

Thank you for your answer, it helped me a lot.

I would like to know if it is possible to move the "media" folder that is in "public".
(for example put it in the "src" folder)
If yes, which file should I modify to change its path

Thanks in advance


user
Carmelo D 2 years ago

Hi,

Our application is based on Create React App, which uses webpack under the hood (not vite).
Try to check this article about moving CRA to vite https://cathalmacdonnacha.com/migrating-from-create-react-app-cra-to-vite

Regards,
Keenthemes support


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