Get 2025 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

Problem with deploying


Hi everyone
i'm using react-metronic v8 and i have some problems with deploying!
in localhost everything is ok but when i deploy it into my website notihing will show instead of metronic loading !
the <div id="root"></div> renders nothing and i didn't got any kinds of error !
please help me how can i fix that


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


It looks like you're facing some challenges with deploying your project. Based on your description, I would recommend double-checking the configurations and ensuring that all environment variables are correctly set. You may also want to try clearing the cache or looking for any error logs to pinpoint the issue. Sometimes deployment failures are caused by small configuration oversights.

By the way, if you're looking for professional help with creating a medical CV, you can check out this medical cv writing services, which might be of interest


Deleted comment

Same Issue I am facing. Did anyone found the solution?



I am also facing the same issue , If you have resolved then please help me.



Hi,

Our application is based on CRA https://create-react-app.dev/docs/deployment/#building-for-relative-paths. We haven't touched anything from CRA setup, including deployment settings.
Usually everything what user needs its change param homepage. Your question isn't related to Metronic itself, cause again, we use CRA as a base.
Try to create a default CRA application and deploy it on your server, if it works, you can use the same settings in the Metronic React application: https://create-react-app.dev/docs/getting-started/.

Regards,
Keenthemes support



i followed the document
>yarn build
>yarn global add serve
>serve -s build -l 5000
on metronic template (withoud any changes ! i just copied the files to my folder named "frontend"
and this is the result
this is my console :

Compiled successfully!

You can now view demo3 in the browser.

http://localhost:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

webpack compiled successfully
No issues found.
^C
&iuml;&#140;&#146; &icirc;&#130;&deg; &iuml;&#129;&frac14; ~/De/Pr/panel/Metronic/Participate/participate/frontend &icirc;&#130;&deg; &iuml;&#135;&#147; &iuml;&#132;&brvbar; test-metronic !378 ?86 &icirc;&#130;&deg; yarn build &icirc;&#130;&sup2; INT &acirc;&#156;&#152; &icirc;&#130;&sup2; 1m 11s &iuml;&#137;&#146;
yarn run v1.22.19
warning package.json: No license field
$ react-scripts build
Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

422.34 kB build/static/js/main.df7e9120.js
177.97 kB build/static/css/main.45f218b1.css
15.77 kB build/static/js/358.36bfa664.chunk.js
13.35 kB build/static/js/538.87dc9c32.chunk.js
9.39 kB build/static/js/313.7aad4c3f.chunk.js
6.6 kB build/static/js/76.f8309954.chunk.js
5.45 kB build/static/js/648.8c072233.chunk.js
4.39 kB build/static/js/438.3bccef1a.chunk.js
3.1 kB build/static/js/142.6cb1535e.chunk.js
2.37 kB build/static/js/113.7cc7329d.chunk.js

The project was built assuming it is hosted at ./.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

https://cra.link/deployment

Done in 37.97s.
&iuml;&#140;&#146; &icirc;&#130;&deg; &iuml;&#129;&frac14; ~/Desktop/Project/panel/Metronic/Participate/participate/frontend &icirc;&#130;&deg; &iuml;&#135;&#147; &iuml;&#132;&brvbar; test-metronic !378 ?86 &icirc;&#130;&deg; ls &icirc;&#130;&sup2; &acirc;&#156;&#148; &icirc;&#130;&sup2; 38s &iuml;&#137;&#146;
build Dockerfile nginx.conf node_modules package.json package-lock.json public README.md src tsconfig.json webpack-rtl.config.js yarn.lock
&iuml;&#140;&#146; &icirc;&#130;&deg; &iuml;&#129;&frac14; ~/Desktop/Project/panel/Metronic/Participate/participate/frontend &icirc;&#130;&deg; &iuml;&#135;&#147; &iuml;&#132;&brvbar; test-metronic !378 ?86 &icirc;&#130;&deg; serve -s build -l 5000 &icirc;&#130;&sup2; &acirc;&#156;&#148;
UPDATE AVAILABLE The latest version of `serve` is 14.0.1

&acirc;&#148;&#140;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#144;
&acirc;&#148;&#130; &acirc;&#148;&#130;
&acirc;&#148;&#130; Serving! &acirc;&#148;&#130;
&acirc;&#148;&#130; &acirc;&#148;&#130;
&acirc;&#148;&#130; Local: http://localhost:5000 &acirc;&#148;&#130;
&acirc;&#148;&#130; &acirc;&#148;&#130;
&acirc;&#148;&#130; Copied local address to clipboard! &acirc;&#148;&#130;
&acirc;&#148;&#130; &acirc;&#148;&#130;
&acirc;&#148;&#148;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#128;&acirc;&#148;&#152;

and this is http://localhost:5000 :


<html data-theme="dark" lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#000000"><meta name="description" content="Metronic React Demo 3"><link href="//fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet"><title>Metronic Theme | Keenthemes</title><link rel="shortcut icon" href="./media/logos/favicon.ico"><link rel="stylesheet" href="./splash-screen.css"><script defer="defer" src="./static/js/main.df7e9120.js"></script><link href="./static/css/main.45f218b1.css" rel="stylesheet"></head><body class="page-loading" cz-shortcut-listen="true"><noscript>You need to enable JavaScript to run this app.</noscript><script>if(document.documentElement){var defaultThemeMode="system",hasKTName=document.body.hasAttribute("data-kt-name"),lsKey="kt_"+(hasKTName?name+"_":"")+"theme_mode_value",themeMode=localStorage.getItem(lsKey);themeMode||(themeMode="system"===defaultThemeMode?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":defaultThemeMode),document.documentElement.setAttribute("data-theme",themeMode)}</script><div class="d-flex flex-column flex-root"></div><div class="splash-screen"><img src="./media/logos/default-small.svg" alt="Metronic logo"> <span>Loading ...</span></div><div ></div><svg width="2" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev" ><defs ></defs><polyline points="0,0"></polyline><path d="M0 0 "></path></svg></body></html>



this is package.json file :

{
"name": "demo3",
"version": "8.1.1",
"private": false,
"homepage": ".",
"dependencies": {
"@formatjs/intl-pluralrules": "4.3.3",
"@formatjs/intl-relativetimeformat": "10.0.1",
"@fortawesome/fontawesome-free": "6.1.1",
"@popperjs/core": "2.11.5",
"animate.css": "4.1.1",
"apexcharts": "3.35.0",
"axios": "0.26.1",
"bootstrap": "5.2.0-beta1",
"bootstrap-icons": "^1.5.0",
"chart.js": "3.7.1",
"clsx": "1.1.1",
"formik": "2.2.9",
"line-awesome": "1.3.0",
"nouislider": "15.5.1",
"prism-react-renderer": "1.3.1",
"prism-themes": "1.9.0",
"prismjs": "1.28.0",
"qs": "6.10.3",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-scripts": "5.0.1",
"react-inlinesvg": "3.0.0",
"react-apexcharts": "1.4.0",
"react-bootstrap": "2.5.0-beta.1",
"react-copy-to-clipboard": "5.1.0",
"react-intl": "5.25.0",
"react-query": "3.38.0",
"react-router-dom": "6.3.0",
"react-table": "^7.7.0",
"react-topbar-progress-indicator": "4.1.1",
"socicon": "3.0.5",
"sass": "1.50.1",
"yup": "0.32.11"
},
"devDependencies": {
"@testing-library/jest-dom": "5.16.4",
"@testing-library/react": "13.1.1",
"@testing-library/user-event": "13.5.0",
"@types/bootstrap": "5.1.10",
"@types/chart.js": "2.9.37",
"@types/jest": "27.4.1",
"@types/node": "16.11.27",
"@types/react": "18.0.6",
"@types/react-dom": "18.0.2",
"@types/react-table": "^7.7.9",
"@types/prismjs": "1.26.0",
"@types/qs": "6.9.7",
"@types/react-copy-to-clipboard": "5.0.2",
"prettier": "2.6.2",
"typescript": "4.6.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "prettier --check .",
"format": "prettier --write .",
"rtl": "webpack --config webpack-rtl.config.js"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"eslintIgnore": [
"dist/*"
]
}

----------------------------------------
after all of this, i have still problem even the metronic themplate without any changes instead the homepage address in package.json.
it will show just the html page with metronic loading ! but nothing will load in <div ></div> .
please improve your react document, i think it is not clear enough, and in your youtube channel i didn't find anything in react sad(
please help me more i really need your help.
Best Regards.



Sorry For Late Bro
Just Remove It

"homepage": "."


This theme document should write note on it but they don't even reply.



Hey i am facing the same issue , I have removed the homepage parameter then also it's not working. Please can u guide me?



Hi,

Have you checked the documentation for the deployment process? It should help you with your issue: https://preview.keenthemes.com/metronic8/react/docs/docs/deployment.

Regards,
Keenthemes support


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.

yes i read all of your document
but it didn't work!


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