Get 2024 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
Replies (9)
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
   ~/De/Pr/panel/Metronic/Participate/participate/frontend    test-metronic !378 ?86  yarn build  INT ✘  1m 11s 
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.
   ~/Desktop/Project/panel/Metronic/Participate/participate/frontend    test-metronic !378 ?86  ls  ✔  38s 
build Dockerfile nginx.conf node_modules package.json package-lock.json public README.md src tsconfig.json webpack-rtl.config.js yarn.lock
   ~/Desktop/Project/panel/Metronic/Participate/participate/frontend    test-metronic !378 ?86  serve -s build -l 5000  ✔
UPDATE AVAILABLE The latest version of `serve` is 14.0.1
┌────────────────────────────────────────┐
│ │
│ Serving! │
│ │
│ Local: http://localhost:5000 │
│ │
│ Copied local address to clipboard! │
│ │
└────────────────────────────────────────┘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
(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!
