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
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
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! │
│ │
└────────────────────────────────────────┘
<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/*"
]
}
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
yes i read all of your document
but it didn't work!