I need to put the generated static files from a vue build inside a WordPress page, in theory, it should've been an easy quest, but the static files "have a problem" with the paths to resources like assets, CSS files, and js files.
Example: If you build a Vue project and open the index.html on the live server (vscode extension), the page will be fully white and the developer's tools will show that the resources were not loaded.
Failed to load resource: the server responded with a status of 404 (Not Found)
Looking at index.html, I discovered that if I add a "." in front of the paths inside every href, the resources a loaded.
Basically, if I change this
<link href=/css/chunk-vendors.fb624d12.css rel=preload as=style>
to this
<link href=./css/chunk-vendors.fb624d12.css rel=preload as=style>
The chunk-vendors.fb624d12.css file will be loaded. But this is a very impractical solution because I have many CSS and js files, so I really want to find an optimized solution for this.
Related
I've built out a new site in Next.js and have deployed it on vercel.com (their free Hobby plan).
Everything works except that I built out some sample pages and put them into /public (as instructed by the Nextjs docs) so I have a directory structure as follows:
/public/demo/gencenter/gencenter.html which I'm expecting to be visible on
https://cfsnap.com/demo/gencenter/gencenter.html
but I'm getting a 404 (the console reports "failed to load resource.... 404")
Anyone know if a Next.js has any handles I should jiggle to make static files load? For giggles I put a few image files in the /public directory and I can call them directly and they appear as expected:
https://cfsnap.com/demo/gencenter/swimCalendar.png
I read about naming conflicts in the Next.js docs but "gencenter.html" is unique and doesn't exist anywhere else.
Any help would be greatly appreciated.
Rich
Vercel uses clean urls, causing the file "index.html" to be renamed to "index". When I updated my internal links to point to "index" everything started working again. Only applies to html files apparently, CSS and image files remain unaffected.
https://vercel.com/docs/configuration#project/clean-urls
When I use the command hugo, it generates the index.html in the Public folder. When I open index.html, the site load like this:
But when I use the hugo serve command locally, it generates the link http://localhost:1313/, and the site load properly. It loads like this:
I think the problem is because of the not proper rendering of files or anything similar.
My approach:
I added the code relativeURLs = true and uglyURLs = true at top of the config.toml file but still it does not rendered properly.
I had set baseurl = "/" in config.toml file but this also does not work.
Your theme might be loading CSS using {{ .Site.Baseurl }}.
For example:
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/style.css">
In that case, make sure that the BaseUrl defined at the top of your config.toml file is set to http://localhost:1313, which will allow your local server to find the CSS file.
You're CSS file is not loading properly. This can have several reasons, for example:
http url on an https website.
wrong "integrity" hashes on you css file.
css file is not deployed or not on same location on the server.
Google developer tools plugin might help here. If you right click on your web page, click "inspect" and go to console. You can see any loading errors.
You can install Web Server for Chrome and choose the /public folder of your Hugo website. Your site should now render correctly at the url configured (http://127.0.0.1:8887 in the example screenshot).
You might want to set baseURL to the absolute path of the public folder.
Fixed this by configuring baseUrl in config.toml.
If you're deploying using GitHub pages, you'll want to make your baseUrl equal to your github pages domain.
I created a .js and .css file from a project and added them to a github release
https://github.com/natearn/react-vim-tips/releases
I then attempted to add the code directly to a webpage using an external script and stylesheet (linking directly to the files in the release).
<script type="text/javascript" src="https://github.com/natearn/react-vim-tips/releases/download/1.0.0/VimTips.js"></script>
<link rel="stylesheet" type="text/css" href="https://github.com/natearn/react-vim-tips/releases/download/1.0.0/VimTips.css">
For context, the script creates a global function which renders a react component, which I execute elsewhere on the page.
The network requests for the files succeed after a redirect (so 302 then 200), the javascript loads and runs, but the css rules do not get added to the page.
When I copy the stylesheet and fetch it locally, it works. So I believe the problem is in the mechanism of delivery from the CDN.
Can someone tell me what might be happening here, and how I can fix it?
Remember that GitHub repos are different from web hosting services. You are correct that the issue is related to how the .css file is being served (or rather, in your case, not being served at all). There are a few options:
1) Create a gh-pages branch and reference your stylesheet from there i.e. https://natearn.github.io/react-vim-tips/stylesheets/VimTips.css. This should actually serve your CSS properly.
2) Use RawGit to generate a proper CDN link to your VimTips.css file. I gave this a shot and have a working example at this Stackblitz: https://stackblitz.com/edit/react-bcjjdo?file=index.js. Here's the CDN link I used: https://cdn.rawgit.com/natearn/react-vim-tips/32b5ee66/stylesheets/VimTips.css
The crucial point is that either of these strategies will serve your CSS with the correct Content-Type headers, enabling them to actually load as CSS in your page. Referencing the link to downloads from your release simply prompts a download of the binary data for your CSS file, which will not work. Hope this helps you out!
Use the raw version of the file from your repo,
I have this css file from an old Hello World repo,
using https://github.com/mcarpenterjr/Hello_World/blob/master/style.css you get the file in the repository.
Using https://raw.githubusercontent.com/mcarpenterjr/Hello_World/master/style.css
you get the raw file, which is what you're looking for. To get this simply click the raw button to the upper right of the file contents on a file's page from the repo.
I suppose you could also swap https://github.com for https://raw.githubusercontent.com and drop blob from the address.
Just use this -> https://rawgit.com/
Works flawlessly.
I have multiple scss stylesheets in client/ directory. I have one particular page that is being rendered server-side and being served statically without Meteor app (it is email unsubscription confirmation).
I want to load my main site css bundle on this page.
For this objective everything I need is just a text contents of this bundle or even better an absolute path. Problem is, Assets.getText() access only private/ directory.
However, Meteor knows about this bundle file path on server side as it serves it with index.html somehow.
Is there a way to do it by myself?
If I understand the question correctly, from looking through https://github.com/meteor/meteor/blob/devel/packages/webapp/webapp_server.js, I can get mine like this:
path.join(
path.dirname(
path.join(
__meteor_bootstrap__.serverDir,
__meteor_bootstrap__.configJson.clientPaths['web.browser']
)
),
"merged-stylesheets.css"
)
on the server side. Change web.browser to web.cordova for the mobile version.
But if you want to include it on the static page, you can probably also just go like this:
<link rel="stylesheet" type="text/css" href="/merged-stylesheets.css">
depending on how you are serving the static page
The accepted answer only works in development. In production the css filename is a hash, e.g. facc2661135083eeff000051c65e72e2ad910050.css instead of merged-stylesheets.css.
This works for me in development AND production:
let cssPath = __meteor_bootstrap__.serverDir.replace('/server','/web.browser');
cssPath += "/"+fs.readdirSync(cssPath).find(file => file.slice(-4)==".css");
FYI, I'm using this server-side to pre-render with above-the-fold css: https://forums.meteor.com/t/pre-rendered-landing-pages-with-critical-css/50626
I've created custom 404 html page for Glassfish 3.1 in case of our application is down due to redeploy or some other failures.
But my 404.html doesn't want to search stylesheet and images files relative to its path (it is placed in domain1\docroot\ ). Every resource is searched in myApp context. That's far from what i want, since while redeploy there would be nothing in that location.
I've embedded styles into html, but this can't be done with images.
Storing images on other server would be to much trouble.
Is there a way to get to the docroot folder?
Finally I've created new application (DynamicWebProject in Eclipse) that contains just the files I needed in 404.html (and of course automatically generated META-INF, WEB-INF folders as well).
Then I've deployed it next to the primary application.
My 404.html file contains following reference to external resources:
<link rel="stylesheet" type="text/css" href="/myResourcesApp/style.css"></link>
Note the first slash "/" in href, which forces browser to search resource in the same domain where 404.html file is.