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
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):
There are multiple js and css libaries loaded (see code snippet)
Basically, this is what I have right now:
<link rel="stylesheet" type="text/css" href="/typo3temp/assets/compressed/7a1973f505-d75d99e70d86f83941cb8dde29be02ed.css" media="all">
<link rel="stylesheet" type="text/css" href="/typo3temp/assets/compressed/merged-4c85787f15040b42f80e9b8c12940eda-46385b6288d9ae801d3574a36a4f492d.css" media="all">
<script src="/typo3temp/assets/compressed/jquery-3.2.1.min-0e2a44e5d7960526ea22d19998a23651.js" type="text/javascript"></script>
<script src="/typo3temp/assets/compressed/merged-62fcf9b86d5d5537cbb754d505e7050c-e3f29e58f7f84473b47512d5d903396a.js" type="text/javascript"></script>
And this is what I want to get:
<link rel="stylesheet" type="text/css" href="/typo3temp/assets/compressed/merged-4c85787f15040b42f80e9b8c12940eda-46385b6288d9ae801d3574a36a4f492d.css" media="all">
<script src="/typo3temp/assets/compressed/merged-62fcf9b86d5d5537cbb754d505e7050c-e3f29e58f7f84473b47512d5d903396a.js" type="text/javascript"></script>
Depending on where some extentions get into play, there are multiple libaries not included into the merged one.
I do know where the original libs are coming from (before getting stored in typo3temp), however I don't know how to include those into the merged files.
The typoscript setup should be correct. It is configured like this:
config {
concatenateJs = 1
compressJs = 1
compressCss = 1
concatenateCss = 1
...
Is there a excludeFromConcatenation = 1 or disableCompression = 1 somewhere in the config?
Edit:
There is also includeJS or includeJSFooter or includeJSFooterlibs or includeJSLibs in page configuration of TypoScript are they difering maybe?
The Pagerenderer.php file is somehow seeing them as separate things to concatenate..
I checked a few Typo3 sites of our own company, they have 1 file only, 1 request. So there must be something different, with the page configuration?
This code in TypoScript:
page = PAGE
page.typeNum = 0
page {
# set properties ... (lot of configuration code)
}
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.
I've used window.location (.assign, .replace, .href) to redirect to a page product on click. But for some reason it automatically changes some of href links.
For example:
previous href="commercial/fonts/fonts.min.css" is now href="product/commercial/fonts/fonts.min.css".
previous HTML file
<link rel="stylesheet" type="text/css" href="commercial/fonts/fonts.min.css" />
After this click event triggers
$('.productImage').on('click', function(){
var product_id = $(this).data('id');
window.location.assign("/product/"+product_id);
});
New HTML
<link rel="stylesheet" type="text/css" href="product/commercial/fonts/fonts.min.css" />
Product is automatically to the href. This happens with some other files as well. In case of img src as well
Use / at the beginning of your href, like so: href="commercial/fonts/fonts.min.css" - that should make the URL relative to your document root. At the moment you're using a URL that is relative to the current document. You may want to read up on absolute vs relative URLs, eg in this answer.
At the bottom of several of my website, I have a list of javascript/css reference files, such as
<link rel="stylesheet" href="http://domain.co.uk/general.css" />
<script src="http://domain.co.uk/jquery-3.2.1.min.js"></script>
<script src="http://domain.co.uk/jquery-ui.min.js"></script>
<script src="http://domain.co.uk/helpers.js"></script>
They all point to another website I have. This works as I only need to update the content of the files and since they all point to the same file location updates are easy.
The problem I have is, if I want to add a new file (javascript or css) then I have to add a new <script... or <link... to every website which has this list.
What I'd love to do is move that list into an external file, and reference it there.
EG
Website1
<link rel="stylesheets" href="http://domain.co.uk/myCssFiles.css" />
<script src = "http://domain.co.uk/javascriptFiles.js"> </script>
Website2
<link rel="stylesheets" href="http://domain.co.uk/myCssFiles.css" />
<script src = "http://domain.co.uk/javascriptFiles.js"> </script>
And as such, the content of myCssFiles.cs could be
<link rel="stylesheet" href="http://domain.co.uk/general.css" />
<link rel="stylesheet" href="http://domain.co.uk/general2.css" />
<link rel="stylesheet" href="http://domain.co.uk/general3.css" />
and likewise for the javascript.
How can I achieve this?
Please note, I control these websites and CORS isn't an issue.
Hope this helps,
You can have common.js to include all your js file
common.js
var scripts = {
"http://domain.co.uk/jquery-3.2.1.min.js",
"http://domain.co.uk/jquery-ui.min.js"
}
scripts.forEach(function(data) {
var x = document.createElement('script');
x.src = data;
document.getElementsByTagName("body")[0].appendChild(x);
});
You can have a single common.js file and add links as u needed to the scripts array. You just have to include the common.js in your websites.