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 (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
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!
yes i read all of your document
but it didn't work!
