I made a chatroom with Node.JS and Socket.io. I'm using bootstrap CSS and JS in my project for things like tabs and carouser. The website looks and works perfect on my local server, here aresome screenshots:
but when I pushed the same code on my github and deployed it on heroku, every thing is just cluttered: https://doclerchat.herokuapp.com/
Here is the source code on GitHub: https://github.com/anshul119/chatapp/
Seems like Bootstrap CSS and JS aren't loading thats why only those specific things are creating problems. How can I resolve this issue?
Any help is appreciated.
So, as #vanburen commented, this solved the problem:
Change your requests to the CDN from http to https:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css and https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
Related
I am converting an Astro app to Sveltekit that's hosted on Cloudflare pages. The local dev and builds work fine however on deploy the Tailwind styling isn't applying. The classes are in the html but without any css actually applied.
Loading module from “https://bc853ba5.altov2.pages.dev/_app/immutable/start-75c8c80e.js” was blocked because of a disallowed MIME type (“text/html”).
Loading failed for the module with source “https://bc853ba5.altov2.pages.dev/_app/immutable/start-75c8c80e.js”.
The above picture is the console output on the deployment. I have my personal website hosted with Sveltekit on Cloudflare Pages and didn't have any problems. So the possible reasons I can think of is that this app is a monorepo app but the app works fine just has no css. Although I think there's some issue with reaching the app.css file.
Some other points that might matter
I have vitest and playwright set up from the initial project creation but there's no tests actually made for them.
I'm using the #sveltejs/cloudflare-adapter. I am also using +page.server.ts files to load data but I don't see why that would affect the styling
Any help would be great thanks!
I ran into the same issue today on an existing project. I bumped down the package version of the Cloudflare adapter:
"#sveltejs/adapter-cloudflare": "^1.1.0"
This solved it for me.
please, can you help me?
I'm working on a blog project and one of the requirements is that the blog works even if the browser has javascript disabled. When using the project "https://github.com/dionatanaraujo/rollup-styled-jsx" a fork of "https://github.com/Tomekmularczyk/rollup-styled-jsx", we noticed that when disabling the browser javascript the components are not carrying styling.
How simulate the error:
Enter in the root project and run npm install and then npm run build:prod
Enter in the demo project cd demo and run npm install and then npm run dev
Access the browser http://localhost:3000, go to settings and disable javascript.
Note that the styles will not be loaded.
Please, is there something wrong or missing in this configuration so that the styles work correctly when javascript is disabled?
Component library with js enabled (work's fine):
Component library with js disabled (styles don't work):
The project that is in / demo and was built using Next.js to work with SSR. Please, if anyone can help with that it would be very rewarding.
This is not really a problem, the documentation says that when you disable javascript in dev mode css will not be loaded but in production it will. try to deploy your blog on vercel and disable javascript, you will then see that the css will still be loaded
I'm having the hardest time trying to figure out this bug. All my widgets in JQuery Mobile render incorrectly on my development server, but when I push changes to heroku everything is fine. I tried deleting my tmp folder in rails but it still renders strangely.
Here are screen shots of my development server and the heroku one:
I think it has something to do with the asset pipeline, but I have no idea what might be causing it.
Make sure you delete your public/assets folder. Compiled css and js will overshadow your changes
I have a django site running locally. Everything seems ok except the CSS files that can not be loaded by Chrome. I can see a Failed to load resource error in the console.
The site is ok in firefox
The site is ok if I get the css not from the local server but from the production server
The css source can be viewed correctly
I have no special blocker plugin install
The css is rather big but I still have the issue if I use a very short file
I have similar issues with some js files (ckeditor)
It works of with some other css and js (admin css for example)
The django app has been developped with 1.0 and I am in the process of moving it to 1.4. The css and js files are served as media
Any idea?
Didn't find the real cause but the problem is solved. Maybe because it was served as media and now it is served as a static.
When I render webpages with PhantomJS using Node.js on an EC2 server, I have trouble loading fonts. I have looked this problem up on Google and while people are having issues with this, none of the solutions really helped me. What I am looking for is a method for debugging PhantomJS and #font-face. I want to see what font files it is trying to load and where the problem might be occurring so I can fix it myself. Obviously this is very vague so here are some images detailing my problem:
Rendered on localhost (fonts are installed on the machine): http://imgur.com/o305T
Rendered on EC2 (fonts should be loaded from an external css file): http://imgur.com/6CQW7
I think the answer is pretty easy: You're rendering the image before the FOUT is resolved.
Check this: How to know when font-face has been applied