I'm running API tests using GitHub Actions and I want to upload to the report generated by Mochawesome to Google Cloud so I can see failures clearly without digging through CI logs. I have the upload part working but when I view the html file on Google Cloud it doesn't load, I just get a blank white page. I'm uploading the css files too so why isn't the html file loading?
Using cdn for assets resolves the isssue .mocharc.js:
module.exports = {
reporter: 'node_modules/mochawesome',
'reporter-option': [
'cdn=true',
'timestamp=true'
],
};
When you're creating a file using the Cloud Storage API , set the mime_type to 'text/html' and skip the content_disposition.
You can manually edit the metadata to set the proper type, which is text/css for CSS files. If the type is neither specified nor auto-detected at upload time, Google Cloud Storage serves files as binary/octet-stream which may prevent the browser from properly rendering it.
Alternatively, you can also specify the MIME type in HTML, e.g.,
<link rel="stylesheet" href="css/theme.css" type="text/css">
to make sure that the browser handles it appropriately.
Here are a few examples with similar implementation:
Run HTML file from Google Cloud URL
Serve HTML file
Website host HTML file page
Related
I am creating a web app where, this app will generate a .html file in public/ directory. And after that i want to show that generated html file on a page using iframe .
I am using NextJS for this task. I have configured next.config.js for rewrites but getting 404 error. I am using Railway for hosting. Since in Vercel we can not access filesystem here.
Instead of generating html dynamically, if I upload that .html file, then i can access that file using iframe in production.
I think we can not access those files which were not available during build process. (this is my guess , maybe wrong)
How can I solve this problem or should I use another framework ?
Thanks
Since I was accessing .html files (i.e <iframe src="path-to-file"></iframe>) which were not available during build process, that's why i was getting 404 error.
So I did the following thing:
suppose I want to do this <iframe src="/pdf/page01.xhtml"></iframe> where file location is in public/pdf/page01.xhtml.
so this src is sending a GET request to localhost:3000/pdf/page01.xhtml.
To manipulate this request I created a pages/api/pdf/[...slug].js. In this file you can use process.cwd() to access the file inside your public dir. You read file content using fs.readFile and send the response res.status(200).send(data) like this.
By doing this I was getting the desired result.
Suggestions are always welcome.
I have multiple HTML files stored in Firebase storage. Those files contain regular HTML, and they include links to other files (css, js, etc) stored within Firebase storage as well.
In order to download a file in Firebase storage you usually have to get a proper download URL in your client, something like:
const ref = firebase.storage().ref('static/styles.css');
ref.getDownloadURL().then(downloadUrl => ...download file here...)
Now, my HMTL file is rendered within an iframe. I can process this HTML file and replace all references to other css and js files in the client (Angular) with proper Firebase URLs, and the iframe renders the page just fine.
My issue occurs when one of the files downloaded by the iframe (usually css or js) references a third file. As this reference does not have the right Firebase URL, it fails.
For example, a css file referencing an image background:
background: #2a2f27 url(../images/banner.jpg) no-repeat;
The code above will fail.
Is there a way to serve those files with the Firebase URLs already in place? Maybe with a cloud function?
Another option could be to intercept those outgoing calls in the iframe itself and replace them before the calls are made, but I am afraid this is not possible for security reasons.
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 am trying to add
<meta name="google-site-verification" content="WcGeoFJE8eKgXlxMoHRDpJz1bpPFMGh25PK8M-eDlAw" />
to the section within my layout.twig . I've saved the file and uploaded it to the development version of the web site. But this HTML isn't being included.
All the other entries within the section are Twig codes. Not HTML. I am unsure if I have a cache issue and the revised version of my layout.twig isn't being loaded or if there is some Twig code I should be using for this tag?
Instead of modify the code of your application, I suggest you to proceed to the site verification with the Google file HTML verification procedure.
Simply add the Google files in the web root folder of the project, as example:
./web/googlec1f59ff86d15c795.html
And commit with your source file. In this manner the deploy procedure don't remove your files.
Another good practice, as suggested by # Pazi ツ is to act with the DNS configuration (this require you can manage the DNS site configuration).
Hope this help