How to use environment variable in index.html?
I tried like this
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
// error is occured
<script
async
type="text/javascript"
src="{import.meta.env.VITE_KAKAO_API}"
></script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
Also added .env file in root and create variable with prefix(VITE_)
In case of a one time replacement within the app.html file, In all cases, you want to look at this post: String replacements in index.html in vite. It replaces a string at build time with a vite plugin. If your env var changes, you need to trigger a new build.
In a case of a dynamic property (let's say the locale of your website), you need to have a server (not a static site) and use the hooks where you can read your env variables (doc on hooks: https://kit.svelte.dev/docs/hooks):
export const handle = async ({ event, resolve }) => {
return await resolve(event, { transformPageChunk: ({ html }) => html.replace('%lang%', lang) });
};
Related
<!DOCTYPE html>
<html lang="en">
<head>
<title>Avacados</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ar.marketscale.com/test/test.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<a style="display:none" id="ar-link" href="intent://arvr.google.com/scene-viewer/1.0?file=https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Avocado/glTF/Avocado.gltf&mode=ar_only&link=https://www.google.com&sourceid=chrome&ie=UTF-8&title=Acocados#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;S.browser_fallback_url=https://developers.google.com/ar;end;">Avovados</a>
<footer>
<script type="text/javascript">
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile) {
$(document).ready(function(){
setTimeout(function(){
// $('#ar-link').trigger('click');
$('#ar-link').click(function() {
this.click();
}).click();
},1000);
});
} else {
window.location.href = "https://ar.marketscale.com/test/testfallback.css"
}
</script>
</footer>
<!-- 💁 Include both scripts below to support all browsers! -->
<!-- Loads <model-viewer> for modern browsers: -->
<script type="module"
src="https://unpkg.com/#google/model-viewer/dist/model-viewer.min.js">
</script>
<!-- Loads <model-viewer> for old browsers like IE11: -->
<script nomodule
src="https://unpkg.com/#google/model-viewer/dist/model-viewer-legacy.js">
</script>
</body>
</html>
I am using Scene Viewer and triggering the explicit intent from HTML. It's running in ar_only. The goal is when you visit this website it launches AR automatically. I have a URL and I have a QR code that points to that URL.
When you scan the QR code it starts AR no problem. When you type in the URL it sends you to the fallback website. I know the phone is compatible because it works when you scan the QR code. I have also tried this on other phones and it gives me the same results.
I think Javascript is the issue. I'm using it to "click" or run this automatically. Any ideas on what could be going on?
the link is ar.marketscale.com/test/ar_avacado.html
here is a QR code that links to that URL:
QR CODE
Just struggling to get the Attach addon working. The main xterm (4.4.0) comes up fine, but the Chrome browser Javascript console reports 'Uncaught TypeError: AttachAddon is not a constructor' when I try to reference the addon. The webserver is golang/echo, and I pull in the xterm.js and xterm-addon-attach.js from the packages as follows:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="xterm.css" />
<script src="xterm.js"></script>
<script src="xterm-addon-attach.js"></script>
</head>
<body>
<div id="terminal"></div>
<script>
var term = new window.Terminal();
term.open(document.getElementById('terminal'));
ws = new WebSocket('ws://example.net:8080/ws')
const attachAddon = new AttachAddon(ws);
term.loadAddon(attachAddon);
</script>
</body>
</html>
Can anyone help to point out what I've done wrong?
Also the examples in the docs where I took this from doesn't have the term.open() call, so how would the Terminal instance know what element to attach to? Eg at https://github.com/xtermjs/xterm.js/tree/master/addons/xterm-addon-attach
Many thanks in advance
Andy
Update:
I changed the HTML to include the import statements, as follows:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="xterm.css" />
<script src="xterm.js"></script>
</head>
<body>
<div id="terminal"></div>
<script type="module">
import { AttachAddon } from "./xterm-addon-attach.js";
var term = new window.Terminal();
term.open(document.getElementById('terminal'));
ws = new WebSocket('ws://boundstone.dynamic-dns.net:8080/ws');
const attachAddon = new AttachAddon(ws);
term.loadAddon(attachAddon);
</script>
</body>
</html>
but the Chrome console now reports: "The requested module './xterm-addon-attach.js' does not provide an export named 'AttachAddon'". The webserver serves the script with content type application/javascript, and the Chrome console recognises the structure of the AttachAddon as a Webpack it seems.
I'm afraid I'm not familiar as I clearly should be with JS modules. The web server for my project is not (and can't be) Node, but does that make a difference?
Many thanks in advance
Andy
This is what worked for me. The only thing you have to do is use AttachAddon twice as shown below using the OP's example. That's the only trick to getting it working. I am also using the fit addon and it was the same thing with that.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="xterm.css" />
<script src="xterm.js"></script>
</head>
<body>
<div id="terminal"></div>
<script>
var term = new window.Terminal();
term.open(document.getElementById('terminal'));
ws = new WebSocket('ws://boundstone.dynamic-dns.net:8080/ws');
const attachAddon = new AttachAddon.AttachAddon(ws);
term.loadAddon(attachAddon);
</script>
</body>
i downloaded the nicedit with mathtype js plugin files
but i cannot setup the editor
i get the window.opener is null error
second thing i cannot find the com.wiris.jsEditor class in any js files
<i><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<textarea name="area"></textarea>
<div id="editorContainer">
</div>
<script src="../js/nicEdit.js"></script>
<script>
_wrs_currentPath = "/var/www/html/nicedit/"
nicedit_wiris_path = "nicedit_wiris"
</script>
<script src="../nicedit_wiris/core/WIRISplugins.js?viewer_image"></script>
<script src="../nicedit_wiris/nicedit_wiris.js"></script>
<script src="../nicedit_wiris/core/core.js"></script>
<script src="../nicedit_wiris/core/display.js"></script>
<script src="../nicedit_wiris/core/displaymathml.js"></script>
<script src="../nicedit_wiris/core/cas.js"></script>
<script src="../nicedit_wiris/core/editor.js"></script>
<script>
bkLib.onDomLoaded(function () {
nicEditors.allTextAreas()
// editor = new com.wiris.jsEditor.JsEditor('editor', null);
});
</script>
</body>
</html></i>
unfortunately, we do not give support to NicEdit anymore. The version of the MathType plugin that you have is 5 years old and does not work for the current version of NicEditor.
On the other hand, we do have MathType plugins implementations for the main HTML editors like TinyMCE, CKEditor or Froala.
In case you really need to use NicEdit, you could build your own implementation upon our Generic integration. In that case, we will give some assistance. Please, find some documentation below.
https://www.npmjs.com/package/#wiris/mathtype-generic
Best!
I made an application with dart / polymer / sockets, and i want to compile it in Javascript. But I don't know how to do. I tried to do "Generate Javascript", but it said "You do not have main entry point".
Should I compile manually each dart files ?
Does build.dart useful ?
Edit Added index.html from comments:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="bootstrap.min.css" />
<link rel="import" href="console.html" />
<link rel="stylesheet" href="base.css" />
<link rel="stylesheet" href="css/main.css" />
<script src='packages/polymer/boot.js'></script>
<title>XXX</title>
</head>
<body>
<fei-console></fei-console>
<script type="application/dart">
main() { }
</script>
</body>
</html>
If it is complaining about a main entry point, I suspect it cannot find a main() function defined anywhere. In your index.html (or whatever the main html file is called), you presumably have a link to a Dart file. Does that file have a main() function defined?
I have a phone gap application with jquery mobile and I can get external links to work and single page navigation working but I cannot open another file in my application. All the files are located in the www folder. The error message is "Failed to load webpage with error: The requested URL was not found on this server. If i comment out the jquery-1.6.4.min.js file it will work but that's not a good solution. I've tried rel="external" and several other things I've seen by googling but nothing seems to work
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=no;" />
<meta charset="utf-8">
<link rel="stylesheet" href="include/jquery.mobile-1.0.min.css" />
<script src="include/jquery-1.6.4.min.js"></script>
<script src="include/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
<script type="text/javascript">
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady()
{
//do something
}
</script>
</head>
<body onload="onBodyLoad()">
<div data-role="page" id="manage">
<div data-role="content" id="inputs">
About
</div>
</div>
</body>
</html>
Make sure that you update your PhoneGap manifest. Look for PhoneGap.plist, open it and look for ExternalHosts. You need to add the urls one by one, or you can simply add "*". This will allow the use of all urls within the application. PhoneGap blocks all urls by default.