I have a Kotlin multiplatform setup including a JS and Java part. In the common folder I wrote a couple of methods that should be compiled to js. Such as:
class test {
init {
println("this is completely working")
}
}
Now when I build my project, in the JS-exclusive folder there is a node_modules folder generated including the example from above (although I expected Kotlin to convert println to console.log which it did not). Now I would like to include this file and its method for another JS file to read from. How could that be done? Unfortunately there isn't a lot of documentation on these multiplatform topics and I struggle to get the most basic things done.
You need to load the script that is generated by the Kotlin/JS compiler.
Both SharedCode.js and BluetoothSerial.js were generated by the Kotlin/JS compiler.
<head>
<title>WebView Callback Demo</title>
<script src="js/kotlin.js"></script>
<script src="js/SharedCode.js"></script>
</head>
<body>
<div id="root">
</div>
<script src="js/BluetoothSerialJs.js"></script>
</body>
https://github.com/darran-kelinske-fivestars/cordova-alternative-pattern/blob/3208b24b839db6f01a27d0d5fda15cd80a4a0d12/app/src/main/assets/index.html#L4-L15
You can then call the javascript functions that were generated like this:
PackageName.Module.Function() <- you might need to include class name
com.fivestars.bluetooth.BluetoothSerial.configureChannel()
A sample project is here:
https://github.com/darran-kelinske-fivestars/cordova-alternative-pattern
Related
I just set up a very basic Spring Boot Web Application with Thymeleaf, but I can't access my external JS file from the corresponding HTML file of my template and can't figure out why.
My resource folder structure is as follows:
static/
index.html
css/
graph.css
js/
createGraph.js
templates/
visualizeGraph.html
Within my visualizeGraph.html I try to call the createGraph.js using following snippet within the <body> element:
<script th:src="#{/js/createGraph.js}" type="text/javascript" >
</script>
In the <head> element of visualizeGraph.html, I added my stylesheet using following snippet:
<link rel="stylesheet" type="text/css" media="all"
href="/css/graph.css" th:href="#{/css/graph.css}" />
My Spring Boot Web Container runs on Port :8082, so I access my webapplication from localhost:8082 and access the visualizeGraph template from localhost:8082/visualizeGraph
When I check the Developer Console (F12), it throws a 404 for the createGraph.js file, but not for the graph.css file -> it can find the css successfully.
I can even access the css through localhost:8082/css/graph.css but CAN'T access the js-file using localhost:8082/js/createGraph.js (throws a 404 - as expected)
I can't figure, what's the cause for this phenomenon as my application.properties also has no additional parameters for modifying the resource source folder etc.
Okay, this was VERY weird. I found the solution, but I am not sure, whether it's IntelliJ, which was responsible for this problem or something else.
What I did was to edit my <script> element in my HTML file to the following:
<script src="/js/createGraph.js" type="text/javascript" >
</script>
and my intention was solely to try out, whether it would change anything. Somehow, IntelliJ told me, that it was not able to find the path (neither the js folder, nor the createGraph.js file within it) so what it suggested was to create the folder and the file (so I did, using ALT+Enter). What I did afterwards is to just copy the content of my old createGraph.js to the new file and to delete the (very strangely the same named) old folder and file and voila, everything works as expected... Very weird.
You can call your JS files present in resources/static folder like below:
<script type="text/javascript" src="js/script.js"></script>
No need to give the forward slash before the js folder.
below I am attaching screenshot for my code:
Here, I was having images folder inside the static folder so we can directly call that folder.
If you have any further doubts please feel free to visit my github amisham96
I have a flask project and I have a templates folder and a root folder that holds my files.
The structure looks like this:
flask_py_Javascript_sandbox/
templates/
form.html
venv/
app.py
formjs.js
My form.html looks like this:
<!DOCTYPE html>
<html>
<body>
// Test form
<script src="../formjs.js"></script> // I have also tried "formjs.js", "/formjs.js"
<script>
myFunc();
</script>
My formjs.js file looks like this:
function myFunc() {
alert("works");
}
I have looked at these 2 questions but they seem to have a slightly different issues. Issues where I don't know if their fix works for my flask project:
How to call external JavaScript function in HTML and Javascript in different folder than HTML
This seems like something simple but all tutorials I've seen just tell you what to type in your files but do not give you the nuances of folder structure.
Any help is appreciated.
Here is a screenshot of my folder structure as my text is causing some confusion:
The problem was the fact that I was hosting the development site on my own machine. To import a JS file it most be in a static folder. This is not made clear in a lot of tutorials because it is handled for you.
Folder structure should have a static folder and should look like this
Root
-static
file.js
-templates
page.html
...
To load your js file into your html you need to import it like any other script but you will need to add the url_for.
<script src="{{ url_for('static', filename='file.js') }}" type="text/javascript"></script>
Better explained here.
Used in an answer here.
If you are like me you didn't know you needed a static file and no amount of searching would have help.
I have a HTML + vanillaJS project that works fine. It looks like this:
index.html
...
<script src="foo_class.js"></script>
<script src="main.js"></script>
...
foo_class.js
class Foo { ... }
main.js
new Foo();
Since I want to use Typescript, I changed the .js extensions to .ts. Next I would like to:
Replace the 2 <script> tags in the HTML by just one <script src="all_code.js"></script>
Tell TypeScript that the 2 JavaScript files need each other to work (by using import/export or something similar)
I tried many combinations of import/export and tsconfig.json (with the outFile option), but nothing seems to work. I either get errors when doing tsc or when opening the index.html file in my browser.
I'm creating a web app using node and react. Rather than seperate Node and React apps I want to integrate React into it. So rather than a react app, I tried importing react CDN into the index.html. My server serves the index.html perfectly, but I'm getting an error in the react component.
this is my index.html
<html>
<head>
<meta charset="utf-8">
<title>React Powered chat App</title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js" charset="utf-8"></script>
<script src="/scripts/main.js" charset="utf-8"></script>
<body>
Hello !
<div id ='App'></div>
</body>
</html>
and this is my main.js
class App extends React.Component {
render(){
return (
<div>
Hello !
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('App'));
The error I'm getting is
Uncaught SyntaxError: Unexpected token < main.js:4
What have I done wrong? Isn't it possible to use react with CDN ?
And first when I used react/cjs/react.development libraries I got more errors. Then after reading this stackoverflow question I use /react/umd/ libraries. So what's the difference between cjs and umd CDN libraries ?
The code doesn't work because react uses JSX (HTML inside javascript), which cannot be read by the browser and needs to be transpiled to ordinary javascript which can be read by browsers. One such transpiler is babel. Your code doesn't work due to the absence of transpiler.
You can use create-react-app, which comes bundled with the transpiler and everything that you'll need to get started with react. And as I understand, since you want to add your express backend, here is a tutorial that will help you get started with attaching create-react-app to your express backend. Hope this helps.
Since JSX (the HTML code sprinkled in the JavaScript) is not regular JavaScript or ES6 code, you cannot load it directly in your browser.
So the problem is not getting the React library from a CDN, that’s fine.
The problem is that you have to transpile your main.js file to regular JavaScript code, for example using Babel.
The most commonly used tool to do this transpilation with Babel automatically is webpack.
If you don’t want to learn how to set up webpack and Babel in detail, I recommend to use create-react-app, this takes the burden of setting up all of the boilerplate from your shoulders and creates a JavaScript bundle that you can use directly in your browser.
Note: if you do end up using create-react-app, you don’t need to get the React lib from a CDN, it will already be included in the bundle.
You also need to add babel cdn in the Html file which would convert JSX to JS
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
I'm currently attempting to refactor my repeated JavaScript code from my xyz.scala.html files into a separate main.js file, which can then be linked to using something like the below (from my scala.html files):
<script src='#routes.Assets.at("javascripts/main.js")'><script>
And using the below in my conf/routes file:
GET /js/*file controllers.Assets.at(path = "/public/javascripts", file)
Having Googled around I'm struggling to find a simple way of using JS from a file in my Play Framework application and setting up the conf/routes file.
Does anyone know a simple way of getting this to work?
Public assets folders
Record in the routes file
GET /assets/*file controllers.Assets.versioned(path="/public", file: Asset)
Script loading in twirl template
<script src="#routes.Assets.versioned("javascripts/hello.js")" type="text/javascript"></script>