I have a React version and have it running on the developer machine. When I publish to Azure ("npm run build", then copy "dist" to the web server), it is also working (so the API server and DB are correct), but apparently no style sheets are applied. Everything is in plain text. I notice that the "metronic" folder is not under "public", could that be a problem? This is the original App from you, with no changes from me except to get the DB etc. running.
18 Answer(s)
-
0
I get this error list at startup, when developer tools are running:
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
As I mentioned all functionality is present. Here is the Users page after logging in as admin. I can also switch languages.
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
Hi @winstat
Yes, you're right, the styles aren't loading because the Metronic theme isn't in the public folder. To fix this, copying and moving the Metronic folder to the dist folder will allow the styles to load and resolve the issue.
The file structure should be as follows:
Thank you for providing this feedback. We will fix this quickly.
If you want to test it before publishing, you can run this command in the terminal of your React project.
npm run build npx serve dist -s -l 4200Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
Thank you. But of course now the "import" paths to "metronic" do not work.
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
I have a workaround! I leave everything as it is. The build step does not copy metronic to dist, but I can manually FTP the metronic folder to Azure, directly under "wwwroot". Then everything displays correctly.
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
Hi @winstat
Yes, this will solve your problem. We are currently making corrections to ensure that metronic files are copied correctly when you build. We will inform you when it's complete.
Thank you for your feedback.
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
Font-Awesome icons are also missing, e.g. "fa fa-cog", even after my workaround. KeenThemes e.g. "ki-outline ki-folder" work correctly.
I think KeenThemes are imbedded in metronic, but where does FontAwesome come from?
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
Hi @winstat
Could you please test this issue after applying the changes in this pull request? We believe this pull request will resolve the problem. It has already solved the style and icon loading issues on our end.
Please feel free to contact us if you have any problems after applying it.
Thank you.
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
Thanks for helping. I cannot access the pull request (I get a 404), so apparently I need other credentials. If it is just a few changes, perhaps you can list them for me.
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
Hi @winstat
Thanks for your response. Since the pull request is not accessible on your side, here are the exact changes we made:
- index.html change (theme customize path)
var customizeHref = '/common/styles/themes/' + theme + '/metronic-customize.css';updated to:
var customizeHref = '/assets/common/styles/themes/' + theme + '/metronic-customize.css';- package.json update Added the following dependency:
"vite-plugin-static-copy": "^4.0.1"- vite.config.ts changes
- Imported the plugin:
import { viteStaticCopy } from "vite-plugin-static-copy";- Updated config to conditionally use it in build mode and copy Metronic assets:
export default defineConfig(({ command }) => ({ plugins: [ react(), command === "build" && viteStaticCopy({ targets: [ { src: "metronic/common", dest: "" }, { src: "metronic/vendors", dest: "" }, { src: "metronic/themes", dest: "" }, { src: "metronic/keenicons", dest: "" }, { src: "metronic/flaticon", dest: "" }, { src: "metronic/fonticon", dest: "" }, ], }), ], }));These changes ensure that Metronic static assets are included in the build output and that the correct theme path is resolved at runtime.
Let me know if you need anything further.
If you want to access the GitHub repository, you can follow these steps:
- Go to https://aspnetzero.com and log in using the account associated with your license.
- Click the Account button in the top right navbar, then select Manage.
- On the account management page, go to the GitHub Members tab. This section lists the GitHub users with access to the private repository.
- If your GitHub username is not listed, you can add it here.
- If it’s already listed but access still isn’t working, try removing the user and adding it again.
- If that doesn’t resolve the issue, please email [email protected] with your license/subscription details and your GitHub username. The team will assist you further.
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
I can also confirm that the default css-file is on the server at that location.
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
Hi @winstat
Is there any error output in the console? If so, could you please share it with us? I will investigate the cause of this problem and inform you of the solution steps. This problem has not occurred on our end, but I will investigate and inform you of the solution.
Thank you.
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
Hi @winstat
Could you please verify that the fonts
Interand other fonts have been correctly copied underdist/assets/? We suspect these fonts haven't been installed.Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
Hi @winstat
The folders under dist/assets/fonts should look like the screenshot.
Note: Can you please remove the screenshot you shared in the previous message?
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
Thanks for your quick response! Yes, here is the complete list of console errors. So apparently some specific files are missing from /assets.
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
Hi @winstat
Could you please copy all the fonts files located in the assets/fonts folder to the server? We believe this will resolve your issue.
Thank you
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
Hi, I found the problem, when I noticed that all errors referred to .woff or .woff2 files.
I am hosting on Windows/IIS (which I never mentioned to you). The fix is to add these lines to web.config staticContent
<mimeMap fileExtension=".woff" mimeType="application/font-woff" /> <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />You should update your documentation about web.config on https://docs.aspnetzero.com/aspnet-core-react/latest/Deployment-React-Publish-Azure
Glad we got it figured out, thanks for working with me on this!
Regards, Robert
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
Hi Robert
Thank you for your feedback. We will update the document you mentioned.
We are glad you resolved the issue.
Please feel free to contact us if you need any further assistance.
Best Regards, Oguzhan
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image)
