Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

The production of Metronic 9 React is not built correctly


I purchased Metronic.

The DEV (yarn dev) version runs without problems. I'm trying to build and run a test DIST (yarn build) version on the server. But I get a blank screen at the address of the public server. I have one file in the dist folder (/metronic/metronic-v9.1.2/metronic-tailwind-react/typescript/vite/dist) "index.html " and 2 folders "assets" and "media".

At the same time, inside the file index.html I have links to "/metronic/tailwind/react/media/app" and "/metronic/tailwind/react/assets" that are not physically present.

What did I do wrong?


user
Константин Прогацкий 1 year ago
Metronic React
1 Answers
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 (1)

user
Faizal Author 1 year ago

Hi Константин Прогацкий

Sorry for the delay in responase. Since you're deploying the app to a subfolder (like /metronic/tailwind/react/), Vite needs to know about that during the build. By default, Vite assumes the app will be hosted at the root (/), so all links in index.html are generated that way.

To fix this, you should update the base option in your vite.config.ts file:

// vite.config.ts

import { defineConfig } from "vite"



export default defineConfig({

 base: "/metronic/tailwind/react/", // your subfolder path here

 // other config...

})


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