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)
Hi,
Our application is based on CRA 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:
Regards,
Keenthemes support
i followed the document
<pre> 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! │ │ │ └────────────────────────────────────────┘ </pre>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 :
and this is http://localhost:5000 :
<pre lang="html"> <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> </pre>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!
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
