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
Related
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.
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 download a Bootstrap template and embed it on my web application. It works fine when I am trying to access using localhost:xxxxx
But when I try to access using same or any controller(localhost:xxxxx\Dashboard\Patient) styles and scripts are not working.
Also tell me that in above scenario where i have to register or add references of bootstrap
Sounds like your paths are off. If you are using Chrome, hit F12 to bring up developer tools, and then reload the page. Errors will be written to the console indicating resources couldn't be loaded. I'm guessing you are referring to them as thought they reside in the same directory of the page (e.g. <link href="bootstrap.css"...
Try using Bundles and let them manage the paths for you. So add this to your <head>:
#Styles.Render("~/Content/bootstrap")
And add this script Bundle right before your closing </body> tag:
#Scripts.Render("~/bundles/bootstrap")
These refer to a Bundles of CSS and Javascript files. Open up /App_Start/BundleCondif.cs and add these Bundles:
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js"));
bundles.Add(new StyleBundle("~/Content/bootstrap").Include(
"~/Content/bootstrap.css",
"~/Content/bootstrap-theme.css"));
Note the paths, your bootstrap.js needs to reside in /Scripts/ and your CSS files need to reside in /CSS/
I have a rails app I put my index.html in public folder and it shows when i go to port 3000 but it doesn't show it with css, I have my css folder and i tried putting it into assets stylesheets but nothing is happing? where do i put my folder with all the css files in it? would i need to change the way my index.html referances my css files?
for now my index.html in public folder references the css files like this <link href="css/styles.css" rel="stylesheet">
i've looked into some tutorials but their a bit complex in understanding
Things put in the public folder won't be processed by the asset pipeline. This isn't the "rails way" at all, but you can just move your .css to your public folder and call it like you're calling it now.
To gain access to the asset pipeline the quickest way I can think of is to just scaffold generate something, fill in the view with your HTML and then you can call via asset pipeline. However by default the root route isn't set so you'll have to navigate to localhost:3000/whatever-controller-you-generated-here
I highly recommend reading this guide before you go much further http://guides.rubyonrails.org/
First of all if you are using rails then why are you using static page like this. If you really want to use this then you have to specify stylesheet like this
<link href="/assets/application.css" rel="stylesheet" />