first-time asker here. I just started making a desktop application with electron js, and when I try to load my external stylesheet into my index.html file, it will not work. Here is my HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bundle</title>
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<link rel="stylesheet" type="style.css"
href="https://raw.githubusercontent.com/AlessioToniolo/Bundle/master/style.css">
</head>
<body>
<div class="header-separation">Hello</div>
<script src="main.js"></script>
<script>
/* const electron = require('electron');
const {ipcRenderer} = electron;
ipcRenderer.send('item:add', item);
*/
// For other window:
/* previous code plus
ipcRenderer.on('item:add', (e, item) => {
})
*/
</script>
</body>
</html>
When I tried to link to my external stylesheet originally I just used a path instead of a URL but then when it didn't work I tried loading another stylesheet from a CSS framework which did work. What am I doing wrong? Thanks!
I don't think GitHub allowed that its because the CSP, you should host your CSS on other place like unpkg.com.
Here are GitHub CSP. You can look at your network tab on dev tools
default-src 'none'; style-src 'unsafe-inline'; sandbox
I think it is because used sandbox sandbox described here
and the content type of the request made was text/plain not text/css so it is not executed.
I just tried it out and I can't. First you had typo seperation on you gits, 2 it should be type="text/css"
Try setting the type="style.css" to type="text/css".
Related
I just build a flutter web project. I hosted it on github pages. After successfully from creating repository to deploying project I am getting this following error...
(index):46 Uncaught ReferenceError: _flutter is not defined
I don't understand why is this happening. I tried flutter clean.
I searched for the solution. but many people suggested that run flutter clean command but it made no effect on the project.
Here is my code code for web build.
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
This is a placeholder for base href that will be replaced by the value of
the `--base-href` argument provided to `flutter build`.
-->
<base href="$FLUTTER_BASE_HREF">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="code_snippets">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png" />
<title>code_snippets</title>
<link rel="manifest" href="manifest.json">
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = null;
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
</head>
<body>
<script>
window.addEventListener('load', function (ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function (engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function (appRunner) {
return appRunner.runApp();
});
});
</script>
</body>
</html>
Uncaught ReferenceError: _flutter is not defined is may caused by wrong deployed folder.
you have to delpoy web directory insted of build/web
here some reference from github issue: https://github.com/flutter/flutter/issues/107448#issuecomment-1181591460
or you may try this solution :
Is `Flutter build web` supposed to output a file called flutter.js? Because it does not by me :(
This question is being asked after spending weeks and giving up multiple times on trying to solve this.
I'm developing a VSCode extension that needs to make use of the Webview API. For a while, this could be using Svelte, but now with SvelteKit released as stable and being treated as default when you do npm create svelte, I targetted to use that. After configuring the app to be static SPA with SSR turned off and using the #sveltejs/adapter-static, it seems that serving it is not the same as it was with vanilla Svelte.
This is the svelte.config.js:
import adapter from '#sveltejs/adapter-static';
import preprocess from 'svelte-preprocess';
/**
* Consult https://github.com/sveltejs/svelte-preprocess
* for more information about preprocessors
*
* #type {import('#sveltejs/kit').Config} */
export default {
preprocess: preprocess(),
kit: {
adapter: adapter({ fallback: 'index.html' }),
// ssr: false, // deprecated
csp: {
directives: {
'default-src': ['none'],
'img-src': ['{{cspSource}} https:'],
'script-src': ['{{cspSource}}'],
'style-src': ['{{cspSource}}'],
},
},
// paths: {
// base: '{{baseURL}}', // not accepted
// },
},
};
This is the built HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="content-security-policy" content="default-src 'none'; img-src {{cspSource}} https:; script-src {{cspSource}} 'sha256-N2DRY+AREasGSTE5X4BdHoEYZsaGOpTvUwTBIHmryVA='; style-src {{cspSource}}">
<link rel="modulepreload" href="/_app/immutable/start-e16b6a0f.js">
<link rel="modulepreload" href="/_app/immutable/chunks/index-0576dc7c.js">
<link rel="modulepreload" href="/_app/immutable/chunks/singletons-51070258.js">
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">
<script type="module" data-sveltekit-hydrate="45h">
import { start } from "/_app/immutable/start-e16b6a0f.js";
start({
env: {},
paths: {"base":"","assets":""},
target: document.querySelector('[data-sveltekit-hydrate="45h"]').parentNode,
version: "1672682689612"
});
</script></div>
</body>
</html>
Contrary to vanilla Svelte that would generate something like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
<meta name="viewport" content="width=device-width" />
<script src="/dist/app/main.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
That could be served through Webview like:
function getWebviewContent(webview, context) {
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
http-equiv="Content-Security-Policy"
content="${[
"default-src 'none'",
`img-src ${webview.cspSource} https:`,
`script-src ${webview.cspSource}`,
`style-src ${webview.cspSource}`,
].join(';')};"
/>
<title>My Extension</title>
<script type="module" crossorigin src="${webview.asWebviewUri(
vscode.Uri.joinPath(context.extensionUri, 'dist/app/main.js')
)}"></script>
<link rel="stylesheet" href="${webview.asWebviewUri(
vscode.Uri.joinPath(context.extensionUri, 'dist/app/style.css')
)}">
</head>
<body><div id="app"></div></body>
</html>
`;
}
The file is bit more complex now, so I can't (and shouldn't) try to rewrite it in this function.
The following are the conditions:
VSCode needs absolute paths since it has different environments and protocols. Keep in mind that an extension is served locally to every user. (context.extensionUri is IMPORTANT)
SvelteKit has its set of configurations (different from Vite) that may pose to be restrictive specially with SPA mode.
Content Security Policy for Webview is also restrictive to what and what can't be used.
Probably due to Vite, the file names have hashes, so it's not consistent - but I'm preferring to keep that.
The script block in the HTML (may also need a nonce) is importing the start function relatively as a module.
Instead of writing another template as a string for VSCode that would need to be maintained, it would be ideal to have the generated HTML read into VSCode and served. Using Mustache seems good (hence you see {{cspSource}} in the HTML above).
How would one suggest to architecture and integrate this?
When running my HTML+ExpressJS code i have ran into an issue to do with CSS. When i go to dev tools in the browser i see Refused to apply style from 'https://localhost:5000/public/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Code:
ExpressJS
const app = express();
app.use(express.static('public'));
app.get('/', (req,res) => {
res.sendFile('/home/pi/website/index.html');
});
app.listen(5000, () => console.log('http://localhost:5000'));
HTML:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>homepage</title>
<link rel="stylesheet" type="text/css" href="public/style.css" media="screen" />
</head>
<body>
<h1 class=title>Hello!</h1>
<h1 class=title>This page is running NodeJS on a Raspberry Pi 4 4GB</h1>
</body>
</html>
Your link:
href="public/style.css"
will not work with
app.use(express.static('public'));
because that will be looking inside the public directory for public/style.css in your server file system which means it's actually looking for public/public/style.css and I assume you don't have the file system set up that way. You don't show exactly where style.css is in your server file system, but if it's directly in the public directory you are pointing express.static() at, then you should be using:
href="/style.css"
I am trying to set up my facebook instant game.
I have followed https://developers.facebook.com/docs/games/instant-games/test-publish-share , to test locally then deploy into production.
When testing, everything works fine. However, in production, nothing shows up (black screen) when I open my game. <app-root> doesn't render, app-home's constructor isn't called and it takes up 0x0 pixels.
This is my index.html
<!--
Copyright (c) 2017-present, Facebook, Inc.
All rights reserved.
This source code is licensed under the license found in the
LICENSE file in the root directory of this source tree.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="full-screen" content="yes" />
<meta name="screen-orientation" content="portrait" />
<meta name="viewport" content="user-scalable=no" />
<script type="module" src="/build/app.esm.js"></script>
<script nomodule src="/build/app.js"></script>
<link href="/build/app.css" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/icon/apple-touch-icon.png">
<link rel="icon" type="image/x-icon" href="/assets/icon/favicon.ico">
<link rel="manifest" href="/manifest.json">
</head>
<body>
<script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>
<script type="text/javascript">
const assets = [
'img/asset1.png',
'img/asset2.png',
'img/asset3.png',
'img/asset4.png'
];
window.onload = function () {
// When the window loads, start to initialize the SDK
FBInstant.initializeAsync().then(function () {
// We can start to load assets
for (let i in assets) {
// When preloading assets, make sure to report the progress
FBInstant.setLoadingProgress(i / assets.length * 100);
}
// Now that assets are loaded, call startGameAsync
FBInstant.startGameAsync().then(() => console.log("initialized"));
});
};
</script>
<app-root></app-root>
</body>
</html>
'initialized' is printed in the console, when I open the game. There are two errors there with it (which might have to do with the error I am having)
Console logs
The 404 error (resource not found) is a .js file which I checked was included in the .zip file which I uploaded.
This is what i see when I inspect element on the game
Inspect element
Also, on mobile, nothing is displayed (white screen)
Any help would be greatly appreciated.
Thanks! :)
I'm currently working on web-app using apache cordova, ionic and google map.
I'm getting issues trying to load correctly the google map js api. The problem is that the app don't work on my device but works just fine when I emulate it on Ripple.
So I have a controller for a Ionic View, when the user enter this view a condition check if the google maps api is loaded, if not we load it and then start using the GM Api. I can't figure where it has gone wrong.
Here is the condition making the call for the loading function...
$scope.$on('$ionicView.loaded', function () {
var test = false;
if (test) {
alert("Google Map api fully loaded");
}
else {
alert("Google map api not loaded"); //The alert is fired.
$scope.loadApi();
}
});
The loading function
$scope.loadApi = function () {
if ($cordovaNetwork.isOnline()) //check if device is connected {
alert('Loading api'); //The alert is fired
$.getScript('https://maps.googleapis.com/maps/api/js?sensor=false&key=xxx',
function () {
alert("Api Loaded"); //Alert not fired on device
$scope.startGeo(); // The function isn't called so no map
});
}
else {
alert('Check your connexion');
}
};
Here is the html part, in case I forgot something....
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!--Google map for Angular-->
<script src="lib/angular-google-maps/lodash.min.js"></script>
<script src="lib/angular-google-maps/angular-simple-logger.min.js"></script>
<script src="lib/angular-google-maps/angular-google-maps.min.js"></script>
<script src="lib/localforage/localforage.min.js"></script>
<script src="lib/localforage/angular-localForage.min.js"></script>
<script src="lib/jquery.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<!--<script src='https://maps.googleapis.com/maps/api/js?sensor=false&key=xxx'></script>-->
<script src="js/controllers.js"></script>
</head>
<body ng-app="myapp">
<ion-nav-view></ion-nav-view>
</body>
</html>
I've tried many things such as using angular-load, replacing the getScript function by an ajax call (that is basically just the same thing), tried this answer to see if it could help..
Thanks for your help.
FIRST SOLUTION
Solved my problem by replacing the Google Map loading links.
index.html
Installed the whitelist plugin and added in the head :
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
Replaced google Map loading link :
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
Got rid of the https: from the link.
controller.js
In the map's controller :
The loading function, I replaced the https protocol by the http one.
$scope.loadApi = function () {
if ($cordovaNetwork.isOnline()) {
console.log($scope.logs.apiLoading);
$.getScript('http://maps.googleapis.com/maps/api/js?sensor=false', function () {
$scope.startGeo();
});
}
else if($cordovaNetwork.isOffline()) {
alert($scope.logs.deviceOffline);
}
};
SECOND SOLUTION (Using angular-google-maps)
Just a reminder of angular google map's config in the app.js
For those using Angular google Map. The library load google map automatically, you just have to set it up properly. There is also an event to check if the google map is loaded. I wasn't aware of this at the time, and mixed everything, angular google maps loading process with mine. etcetera :)
angular.module('myapp').config(function (uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
key: 'myKey',
v: '3.20', //defaults to latest 3.X anyhow
libraries: 'weather,geometry,visualization,places'
});
})