Trying to deploy Gatsby site with Contentful CMS. Everything works just fine in development mode - things get rough when I'm trying to build.
Gatsby build command deploys the site, all seems OK at first, but it throws errors preventing my content from loading.
Easier way to show it is just to check my github LIVE:
GIT LIVE
Short description: seems like path to files error - trying to GET files from direct path (local F:\ path for me -> my main github page for git LIVE (name.github.io/...))
I'm having the very same problem with raw Gatsby website built.
My (raw) gatsby main site goes like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="preload" href="/component---src-layouts-index-js-07253e04741551c85ebc.js" as="script" />
<link rel="preload" href="/component---src-pages-index-js-df93eb0c88a52638909b.js" as="script" />
<link rel="preload" href="/path---index-a0e39f21c11f6a62c5ab.js" as="script" />
<link rel="preload" href="/app-29169f9e7be0e183bc9a.js" as="script" />
<link rel="preload" href="/commons-fcbb8af1639fee4f6844.js" as="script" />
<title data-react-helmet="true">Gatsby Default Starter</title>
<meta data-react-helmet="true" name="description" content="Sample" />
<meta data-react-helmet="true" name="keywords" content="sample, something" />
<style id="gatsby-inlined-css">
</style>
</head>
<body>
<div id="___gatsby">
<div data-reactroot="" data-reactid="1" data-react-checksum="238678071">
<!-- react-empty: 2 -->
<div style="background:rebeccapurple;margin-bottom:1.45rem;" data-reactid="3">
<div style="margin:0 auto;max-width:960px;padding:1.45rem 1.0875rem;" data-reactid="4">
<h1 style="margin:0;" data-reactid="5"><a style="color:white;text-decoration:none;" href="/" data-reactid="6">Gatsby
Default Starter</a></h1>
</div>
</div>
<div style="margin:0 auto;max-width:960px;padding:0px 1.0875rem 1.45rem;padding-top:0;" data-reactid="7">
<div data-reactid="8">
<h1 data-reactid="9">Hi people</h1>
<p data-reactid="10">Welcome to your new Gatsby site.</p>
<p data-reactid="11">Now go build something great.</p>Go to page 2
</div>
</div>
</div>
</div>
<script id="webpack-manifest">
/*<![CDATA[*/
window.webpackManifest = {
"231608221292675": "app-29169f9e7be0e183bc9a.js",
"162898551421021": "component---src-pages-404-js-4503918ea3a16cfcdb75.js",
"35783957827783": "component---src-pages-index-js-df93eb0c88a52638909b.js",
"218538773642512": "component---src-pages-page-2-js-1d4f0f19c1c44398ab65.js",
"60335399758886": "path----cac63ff5c1b42581353c.js",
"254022195166212": "path---404-a0e39f21c11f6a62c5ab.js",
"142629428675168": "path---index-a0e39f21c11f6a62c5ab.js",
"135728916539164": "path---page-2-a0e39f21c11f6a62c5ab.js",
"178698757827068": "path---404-html-a0e39f21c11f6a62c5ab.js",
"114276838955818": "component---src-layouts-index-js-07253e04741551c85ebc.js"
} /*]]>*/
</script>
<script>
/*<![CDATA[*/
["/commons-fcbb8af1639fee4f6844.js", "/app-29169f9e7be0e183bc9a.js", "/path---index-a0e39f21c11f6a62c5ab.js",
"/component---src-pages-index-js-df93eb0c88a52638909b.js",
"/component---src-layouts-index-js-07253e04741551c85ebc.js"
].forEach(function (s) {
document.write('<script src="' + s + '" defer></' + 'script>')
}) /*]]>*/
</script>
</body>
</html>
Resolving path manually e.g replacing link href like this:
<link rel="preload" href="/component---src-layouts-index-js-07253e04741551c85ebc.js" as="script" />
into (just adding the dot)
<link rel="preload" href="./component---src-layouts-index-js-07253e04741551c85ebc.js" as="script" />
makes this particular error go away, throwing warning as below:
The resource file://(path here) was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
and another error (pointed NOT at line from HTML HEAD anymore but at the last script (signed as CDATA)
<script>
/*<![CDATA[*/
["/commons-fcbb8af1639fee4f6844.js", "/app-29169f9e7be0e183bc9a.js", "/path---index-a0e39f21c11f6a62c5ab.js",
"/component---src-pages-index-js-df93eb0c88a52638909b.js",
"/component---src-layouts-index-js-07253e04741551c85ebc.js"
].forEach(function (s) {
document.write('<script src="' + s + '" defer></' + 'script>')
}) /*]]>*/
</script>
Going further - changing path here creates another "funny" thing.
When trying to load the page, it "flashes" site with styles and all (just for a split second) and then throws multiple errors like
A page wasn't found for "/F:/HTML/TEST-2/site/public/index.html
bundle loading error true
Loading the component for /404.html failed
bundle loading error true
Loading the JSON for /404.html failed
I'm aware that I shouldn't be doing this all fix-the-path-by-myself thing in working process, however I have no idea where the problem lies in.
Hope I made my problem clear :)
I did a deeper dive on the errors present on your site.
1- The first pair of errors I see is related to Font Awesome:
Subresource Integrity: The resource
'https://use.fontawesome.com/releases/v5.3.1/css/solid.css' has an
integrity attribute, but the resource requires the request to be CORS
enabled to check the integrity, and it is not. The resource has been
blocked because the integrity cannot be enforced.
Subresource Integrity: The resource
'https://use.fontawesome.com/releases/v5.3.1/css/fontawesome.css' has
an integrity attribute, but the resource requires the request to be
CORS enabled to check the integrity, and it is not. The resource has
been blocked because the integrity cannot be enforced.
These related to CORS for the integrity attribute on your Font Awesome includes (line 29 in your compressed codebase).
<link data-react-helmet="true" rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/solid.css" integrity="sha384-VGP9aw4WtGH/uPAOseYxZ+Vz/vaTb1ehm1bwx92Fm8dTrE+3boLfF1SpAtB1z7HW"/>
<link data-react-helmet="true" rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/fontawesome.css" integrity="sha384-1rquJLNOM3ijoueaaeS5m+McXPJCGdr5HcA03/VHXxcp2kX2sUrQDmFc3jR5i/C7"/>
Just delete the checksum hash, or you might want to check why these aren't valid. This is why the CSS is flashing ok; Chrome checks the hash, sees it's invalid and removes it from the DOM.
2- The second set of errors has a bunch of your JS files 404ing. The errors look like this in Chrome DevTools:
GET
https://emzawadzki.github.io/component---src-layouts-index-js-4386bcf88f311dc59346.js
net::ERR_ABORTED 404
If we isolate where the paths are coming from for these files, you can trace them to your webpack build's manifest (line 738):
<script id="webpack-manifest">
/*<![CDATA[*/
window.webpackManifest = {
"231608221292675": "app-cdbd5391462f32fb5915.js",
"162898551421021": "component---src-pages-404-js-f6662393a31fb18d5e07.js",
"35783957827783": "component---src-pages-index-js-6fe4a58b68048902490d.js",
"60335399758886": "path----557518bd178906f8d58a.js",
"254022195166212": "path---404-a0e39f21c11f6a62c5ab.js",
"142629428675168": "path---index-a0e39f21c11f6a62c5ab.js",
"178698757827068": "path---404-html-a0e39f21c11f6a62c5ab.js",
"114276838955818": "component---src-layouts-index-js-4386bcf88f311dc59346.js"
}
/*]]>*/
</script>
The error is in your webpack build. Gatsby hides most of the webpack building stuff behind the scenes, so the error is likely coming out of your gatsby-config.js file. If you can tweak that, I'm pretty sure that's where this second problem is coming from. Comment out everything you aren't using and double check your local error logs.
Related
I'm currently working on a .NET Standard 2.1 Blazor WebAssembly application.
I try to include or exclude Stylesheets according to an environment variable.
In .NET Core there are usually Environment Tag Helpers like in the following example:
<environment include="Development">
<link rel="stylesheet" href="css/style.css" type="text/css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="css/style.min.css" type="text/css" />
</environment>
This works perfectly fine in a Blazor Server application, but doesn't in Blazor WASm, as this is client-side code.
Thus I try to find a good solution to include/exclude Style sheets according to the Environment variable in Blazor WebAssembly.
My current approach is to call a JavaScript helper method from my Blazor WASm Program.cs file with JSInterop and remove the Stylesheets according to the environment variable:
await jsInterop.InvokeVoidAsync("helpers.setup", "Development");
My JavaScript on the client looks like this:
window.helpers = {
setup: (environment) => {
if (environment === "Development") {
// remove production styles
}
if (environment !== "Development") {
// remove development styles
}
}
};
The problem with this solution is, I want to put my styles into my header file and group them into a <section> element or something similar - which doesn't work in valid HTML5.
How do you handle your Development/Production environment in Blazor WebAssembly?
How can you exclude or include specific CSS files according to the set environment variable in the project settings (launchsettings.json)?
Disclaimer:
This is just something I tried that seems to work. I could not find any documentation supporting doing it this way, nor anything saying not to do it this way. if there is any official documentation please let me know.
The documentation state:
When running an app locally, the environment defaults to Development.
When the app is published, the environment defaults to Production.
Further down it does mention how to set the environment via the web.config that gets generated when publishing the file to IIS.
There are also references to Use multiple environments in ASP.NET Core. and Host and deploy ASP.NET Core Blazor WebAssembly
However this is what I did.
Looking at the Program.cs file that was generated by the new web assembly project template, the builder is created by WebAssemblyHostBuilder.CreateDefault(args); This must mean that all the default services must already be registered in the services container.
This would include the IWebAssemblyHostEnvironment configuration service.
The next line down builder.RootComponents.Add<App>("app"); adds the App <app></app> root component that is used in the index.html file.
So, Why not try to create a Head <head></head> component and see what happens.
I created a Head razor component and named it Head.razor containing all the html that would usually live between the <head></head> tags.
#using Microsoft.AspNetCore.Components.WebAssembly.Hosting
#inject IWebAssemblyHostEnvironment hostEnv
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
#*Check the environment value*#
#if (hostEnv.IsDevelopment())
{
<title>BlazorWasmApp - In Debug</title>
<link href="css/debug.css" rel="stylesheet" />
}
else
{
<title>BlazorWasmApp - Not Debug</title>
<link href="css/live.css" rel="stylesheet" />
}
#code {}
Because it is a component you can inject the IWebAssemblyHostEnvironment and check the .IsDevelopment(),.IsProduction() etc.. extension method values.
I left the original <head> tag as is in the index.html file as the content of the <head>...gets overwritten...</head> seems to be completely overwritten.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>BlazorWasmApp</title>
<base href="/" />
<link href="css/app.css" rel="stylesheet" />
</head>
<body>
<app>Loading...</app>
...
...
Also leaving the <head>tag with the reference to the cs/app.css file does not change the way it looks when the app is Loading....
I registered the Head class to the builder.RootComponents collection in the Program class.
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
//Add the Head to root components
builder.RootComponents.Add<Head>("head");
builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
await builder.Build().RunAsync();
}
I added 2 css files to the wwwroot/css folder debug.css and live.css each containing a simple body { background-color:*red or blue* } style.
In the launchSettings.json file, in the profiles section, set the IIS Express : environmentVariables : ASPNETCORE_ENVIRONMENT to "Development" and under the [YourAppName] : environmentVariables : ASPNETCORE_ENVIRONMENT to "Production".
"profiles": {
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
},
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"
},
"BlazorWasmApp": {
"commandName": "Project",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Production"
},
"applicationUrl": "https://localhost:5001;http://localhost:5000",
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"
}
}
When launching the app with the IIS Express profile (Development) the background is red and when launching the app with [YourAppName] profile (Production) the background is blue.
When looking at the <head></head> tags using the developer tools the content of the head tag contains the css references according to the environment.
IIS Express:
BlazorWasmApp (my app profile):
I'm trying to understand why I can't load captureMouvement.js whereas I can load verifieFormulaire.js. Both of them are stored in the same file as my PHP file. I need to use PHP because I really want that page being dynamic.
I'm also running this site on localhost.
Fact : I could call the script when the page was a HTML file.
I've tried to call the script that is already stored on another server. It did not worked. I also tried to move down to , it did not worked either.
I also tried to call the script using ;?> but this failed too
<head>
<title>Projet</title>
<link href="projet.css" type="text/css" rel="stylesheet" title="projet.css" />
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src ="https://tp-ssh1.dep-informatique.u-psud.fr/~mpetit4/verifieFormulaire.js"></script>
<script src ="https://tp-ssh1.dep-informatique.u-psud.fr/~mpetit4/captureMouvement.js"></script>
<script src ="https://tp-ssh2.dep-informatique.u-psud.fr/~mpetit4/captureMouvement.js"></script>
<script src ="verifieFormulaire.js"></script>
<?php echo '<script src ="projetweb/captureMouvement.js"></script>';?>
</head>
This should call captureMouvement.js, either from local file or from tp-ssh1.dep-informatique.u-psud.fr.
I opened google chrome, so I could check for javascript console. I got this error message : net::ERR_ABORTED 404 (Not Found)
However, I did not get this error for verifieFormulaire.js
Please, help me.
If the .js files are in the same directory as the HTML page (it doesn't matter if it's a PHP page on your server; it's an HTML page from the browser's perspective), then using no path is correct. So remove the extra script tags and the path on them, and there's no need to use PHP to output a static string:
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src ="https://tp-ssh1.dep-informatique.u-psud.fr/~mpetit4/verifieFormulaire.js"></script>
<script src ="https://tp-ssh1.dep-informatique.u-psud.fr/~mpetit4/captureMouvement.js"></script>
<script src ="https://tp-ssh2.dep-informatique.u-psud.fr/~mpetit4/captureMouvement.js"></script>
<script src ="verifieFormulaire.js"></script>
<?php echo '</script>';?>
Those changes give you this:
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src ="captureMouvement.js"></script>
<script src ="verifieFormulaire.js"></script>
If that works for verifieFormulaire.js but not for captureMouvement.js, then there are really only a few possible reasons:
There's a problem with the permissions on captureMouvement.js; make sure they match verifieFormulaire.js.
There's a typo in the name (perhaps you're using a case-sensitive file system and the filename is capturemouvement.js or in some other way subtly different).
captureMouvement.js isn't in the same directory.
captureMouvement.js is getting loaded, but failing to parse/run because of a syntax error. Check your web console for errors. (No, you said you get a 404 for it.)
My production sharepoint url is
http://test.com/sites/prod
QA is
http://test.com/sites/qa
and dev is
http://test.com/sites/dev
and I have to change relative reference urls JS & CSS files(/sites/dev/) for each environment,is there any way to make it configurable?
<link rel="stylesheet" href="/sites/dev/Style%20Library/cocmt/css/kendo.common.min.css" />
<link rel="stylesheet" href="/sites/dev/Style%20Library/cocmt/css/kendo.default.min.css" />
<link rel="stylesheet" href="/sites/dev/Style%20Library/cocmt/css/kendo.default.mobile.min.css" />
You can make use of url tokens.
You can use ~sitecollection token which represents the URL of current site collection. If you want to get token of current site, you can use ~site token.
So, you can modify your link as below:
<link rel="stylesheet" href="~sitecollection/Style%20Library/cocmt/css/kendo.common.min.css" />
Reference - URL and tokens in SharePoint
If it is unclear than let's try this again.
In my research I learned that some call it a micro-loader, which is what I am trying to achieve. In the webpack configuration I have this in the plugin section
new HtmlWebpackPlugin({
template: 'src/index.html',
title: METADATA.title,
chunksSortMode: 'dependency',
metadata: METADATA,
inject: 'head'
}),
which turns an html file without any script tags (or even placeholders for them) during compilation in something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My angular widget</title>
<meta name="description" content="My angular widget">
<!-- base url -->
<base href="/">
<link href="main.23ca1423b5f74b9e7d3a76e9eed69f71.css" rel="stylesheet"><script type="text/javascript" src="polyfills.60dbe827b1b8353af66f.bundle.js" defer></script><script type="text/javascript" src="vendor.0f040ba30b8e909c6a82.bundle.js" defer></script><script type="text/javascript" src="main.d6e9175158901f87b307.bundle.js" defer></script></head>
<body>
<app class="skin-green gbp">
Loading...
</app>
</body>
</html>
It magically adds those 4 files (1 css, 3 js) into the head section.
Now what I want is something like this (the angular-widget.js file)
function loadCss(url) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}
loadCss('https://my-domain.com/app/main.1928b5b43a58428e7798d12176de68e3.css');
require(['https://my-domain.com/app/polyfills.60dbe827b1b8353af66f.bundle.js'], function() {
require(['https://my-domain.com/app/vendor.623bbcbf99de3526eab8.bundle.js'], function() {
require(['https://my-domain.com/app/main.d4f6aea1525a044b41da.bundle.js'], function() {
});
});
});
Which is a file I came up which does what I want it to do, but takes manual work everytime and utilizes require.js for now (but can be anything, I don't really care), which is the only point of entry and gets automatically generated during the compilation so I don't have to manually change the hashes everytime something changes and gets redeployed.
-- Old Post starts here
I have an angular 2 project using webpack for compiling. But I do not want the entry point to be the index.html, because the app is to be embeded into another webpage, which I do not have full control over.
I am trying to find a way to output something similar to the index.html but inside a .js file which I than can include on the webpage.
www.some-domain.com/webpage
[...]
<script type="text/javascript" src="https://my-domain.com/angular-widget.js"></script>
<app>
Loading...
</app>
[...]
Is there a way to generate that angular-widget.js during the webpack process? I tried to hijack the HtmlWebpackPlugin, but that expects to output HTML. I am fairly new to the whole webpack process, but my approach right now would be some template where I just can output the different files which are produced by webpack, for example using require.js. But maybe the whole thing is even possible only via webpack?
I create my app using OpenUI5 and I want try to integrate OPA5 to test it.
I write my test page: TestOPA.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Opa sample for matchers</title>
<script id="sap-ui-bootstrap" src="https://openui5.netweaver.ondemand.com/resources/sap-ui-core.js"></script>
<link rel="stylesheet" href="https://openui5.netweaver.ondemand.com/resources/sap/ui/thirdparty/qunit.css" type="text/css" media="screen" />
<script>
(function () {
jQuery.sap.require("sap.ui.thirdparty.qunit");
jQuery.sap.require("sap.ui.test.Opa5");
jQuery.sap.require("sap.ui.test.opaQunit");
var Opa = sap.ui.test.Opa;
var Opa5 = sap.ui.test.Opa5;
module("Matchers");
opaTest("Should find a Button with a matching property", function(Given, When, Then) {
// Act
Given.iStartMyAppInAFrame("../index.html");
/* When.waitFor({
viewName : "view.Main",
controlType : "sap.m.Button",
matchers : new sap.ui.test.matchers.PropertyStrictEquals({name : "text", value : "Changed text"}),
success : function (aButtons) {
ok(true, "Found the button: " + aButtons[0]);
},
errorMessage : "Did not find the button with the property Text equal to Changed text"
});
Then.iTeardownMyAppFrame(); */
});
})();
</script>
</head>
<body>
<h1 id="qunit-header">Opa sample for matchers</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture"></div>
</body>
</html>
index.html is the root of my app. Inside the flow (not at start) I load resources that are not loaded properly.
I want load the resource http://localhost:8080/ZWebapp2/apps/appChangePwd/changePwd.js
but the console of browser show me a error to load the resource at http://localhost:8080/ZWebapp2/index.htmlapps/appChangePwd/changePwd.js
On all browsers it work fine (open http://localhost:8080/ZWebapp2/apps/appChangePwd/changePwd.js) but I have the problem when I start TestOPA.html
I have the same problem if I launch the my app (index.html) on internal Eclipse browser by Run as --> Web App Preview
Maybe you are referencing your files with a relative path, but you want an absolute one. Here is an example of how to do this with the jQuery.sap.require function of UI5:
JSBIN exmaple
The require statement in the bin should always create the correct request.
In your case it seems like you want declare an absolute path which means it will start building an URL after you host (localhost:8080). An relative path starts where your index.html is located.