I am trying to output a logfile in the clients browser window.
The logfile is on the server.
I found homebridge which I think is doing what I would like to have as well.
I have tried to follow the guide here https://www.npmjs.com/package/xterm but could not get it running:
any idea?
thx
+page.svelte
<script>
import { Terminal } from 'xterm'
let term = new Terminal()
term.open(document.getElementById('terminal'))
term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
</script>
<main>
<head>
<link rel="stylesheet" href="node_modules/xterm/css/xterm.css" />
<script src="node_modules/xterm/lib/xterm.js"></script>
</head>
<body>
<div id="terminal" />
</body>
</main>
-->
TypeError: Cannot read properties of undefined (reading 'Terminal')
at +page.svelte:4:16
at Object.$$render (/node_modules/svelte/internal/index.mjs:1892:22)
at Object.default (root.svelte:41:38)
at Object.default (/src/routes/+layout.svelte:51:34)
at AppShell.svelte:52:63
at Object.$$render (/node_modules/svelte/internal/index.mjs:1892:22)
at eval (/src/routes/+layout.svelte:28:103)
at Object.$$render (/node_modules/svelte/internal/index.mjs:1892:22)
at root.svelte:40:37
at $$render (/node_modules/svelte/internal/index.mjs:1892:22)
Related
I'm using ReactJS CDN to build a web app. I am thinking of hosting it in a qliksense server that acts as a web server. The code runs fine without any issues and the users can access the app with the URL.
I have a few questions before I go into production.
I would like to know the cons of doing it this way.
Are there any factors that I should consider?
How can I minify the code?
Below is an outline structure of my code.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>App</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
<script crossorigin src="https://unpkg.com/react#17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#17/umd/react-dom.production.min.js">
</script>
<script crossorigin src="https://unpkg.com/#mui/material#5.0.2/umd/material-ui.production.min.js"></script>
<script src="https://unpkg.com/#babel/standalone#7.15.7/babel.min.js"></script>
<script type="text/babel" src="AppPage.js"></script>
<script type="text/babel" src="App.js"></script>
<link id="u-theme-google-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i">
<link id="u-page-google-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i">
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<App/>,
document.getElementById('root')
);
</script>
</body>
</html>
App.js
function App(){
const [state, setState] = React.useState(false);
React.useEffect(()=> {
//Do Something
//setState(object)
},[])
return (
<div id="appcontainer">
{state.errorMessage !== null ?
<div>
<h6>{state.errorMessage}</h6>
<h6>Refresh page or Contact support </h6>
</div>
: state.app ?
<Box> <AppPage/> </Box> : null}
</div>
)
}
AppPage.js
function AppPage(){
return (
<h1>hello</h1>
)
}
The only cons I can think of is the possibility that the end users might not have access to the CDN. If you are behind corporate proxy/firewall and for some reason the CDN is blocked then the mashup will not work.
I'm right assuming that you are developing inside the Qlik Dev Hub? If this is the case then in order to minify the code you'll have to download the code minify it (using webpack for example) and then re-upload it back to Qlik
Our web developers are actually developing mashups outside Qlik - developing on localhost and establishing connection with Qlik directly. Once they are happy with the result they minify it and upload it. So their development is done completely outside Dev Hub. The downside here is that a bit more work is needed to set the authentication because when developing inside the Dev Hub the authentication is already made.
I'm following a guide in a book about creating React apps. This is the very first example in the book and I copied it exactly as it was, but the page won't render.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title> Pro MEAN Stack </title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js">
</script>
<script src=
"https://cdjns.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js">
</script>
<script src=
"https://cdjns.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js">
</script>
</head>
<body>
<div id="contents"></div> <!-- this is where the component will appear -->
<script type="text/babel">
var contentNode = document.getElementById('content');
var component = <h1> Hello World </h1>; // A simple JSX component
ReactDOM.render(component, contentNode); // Render the conponent
</script>
</body>
</html>
Here's what the console says,
react-dom.js Failed to load resource: net::ERR_NAME_NOT_RESOLVED
browser.min.js Failed to load resource: net::ERR_NAME_NOT_RESOLVED
I'm not sure what to do at this point. I've never worked with React before
You should update your cdn links to valid ones, use these:
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
contents => content
The preferred way to use react is with some kind of module bundler like webpack. If webpack seems like a hustle you could use create-react-app to have a full react application up and running in no time. it's great.
Fix the links to cdnjs, you misspell it. Also you are creating a div with id "contents", then you select an element with id "content".
The following example works:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>ReactJS Hello World</title>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js">
</script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var contentNode = document.getElementById('content');
var component = <h1> Hello World </h1>; // A simple JSX component
ReactDOM.render(component, contentNode); // Render the conponent
</script>
</body>
</html>
References
Getting started with React the easy way | CodeUtopia
React without build steps - Babel Standalone
Actualize | Anyone Can Learn To Code
just began to learn React and here are my very simple JSX and HTML files. I don't see any error in Console (Chrome) when I run it from my http-server. However the button Im expecting to see won't show in the browser. I'm not sure why it does not and what is missing.
Can anyone please help? Also why should we specify type=text/babel" in the tag? If I don't do this, I get an error (unexpected syntax <) in console.
Thanks!
Prem
HTML Code:
<html>
<head>
<title>
!My first React JS Component!
</title>
</head>
<body>
<div id="root"></div>
<script src="react.js"></script>
<script src="script.jsx" type="text/babel"></script>
</body>
</html>
my JSX File:
var Button = React.createClass({
render: function () {
return (
<button> Go! </button>
)
}
});
ReactDOM.render(<Button />, document.getElementById("root"));
You cannot just include the jsx in your site like that - it won't work :)
You need to transpile your jsx via a tool like Webpack.
The official documentation really is excellent and easy to understand, and it should explain how you setup a basic environment.
Also, there are dozens of tutorials on this, but here's a free one that I found helpful and easy to understand on youtube:
React + Redux + Webpack (Feel free to skip the redux part for a starter - really just a popular addon to React for managing state, which you can expand upon later)
For good measure, something like this should work:
<html>
<head>
<meta charset="UTF-8"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel" src="app.jsx"></script>
</body>
</html>
App.jsx:
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('app')
);
this is my app.js
this gives the error app.js:1 Uncaught ReferenceError: angular is not defined
angular.module('contactsApp',[])
.run(function ($rootScope) {
$rootScope.message = "Hello Angular!";
});
this is my main.html
were i load the app.js file
<!DOCTYPE html>
<html ng-app="contactsApp">
<head>
<titel>Contacts</titel>
<base href="/">
<link rel="stylesheet" href="src/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Contacts: {{message}} </h1>
</div>
</div>
</script>
<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
<scrip src="lib/bower_components/angular/angular.min.js"> </scrip>
<script src="src/app.js"></script>
</body>
</html>
this is my server.js
var express = require('express'),
app = express();
app
.use(express.static('./public'))
.get('*',function (req,res) {
res.sendfile('public/main.html');
})
.listen(3000);
And my file structure is
[this is my directory structure]
plzzz kindly help me!
Im getting error in browser console as
myError
file directory
You have a typo when loading angular:
"<scrip" instead of "<script" (in you main.html file)
Use
use(express.static('../public'))
OR
use(express.static('lib'))
your server.js in within public folder
Check the path for angular.js. Does it exist in "lib/bower_components/angular/angular.min.js
Alternate way is to use <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
I'm getting started with kendo & angular - free version - and I have a page that renders and behaves okay, but throws an error in the background.
I get an
"Uncaught TypeError: Cannot read property 'jQuery' of undefined" in /js/kendo.angular.min.js:16
I think I have a wrong dependency / am missing one, but I'm not sure which. The kendo scripts and css are from the core download page http://www.telerik.com/download/kendo-ui-core
Whats going on here?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Kendo With Angular</title>
<link href="kendo/styles/kendo.common.min.css" rel="stylesheet" />
<link href="kendo/styles/kendo.default.min.css" rel="stylesheet" />
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/angular.min.js"></script>
<script src="kendo/js/kendo.angular.min.js"></script>
<script src="kendo/js/kendo.ui.core.min.js"></script>
</head>
<body ng-app="KendoDemo">
<div ng-controller="Demo">
{{hello}}
<input kendo-date-picker k-ng-model="dateObject" />
{{date | date:'fullDate'}}
{{dateObject | date:'fullDate'}}
</div>
<script>
angular.module('KendoDemo',['kendo.directives'])
.controller('Demo', function($scope) {
$scope.hello = 'Hello World';
})
</script>
</body>
</html>
The kendo.ui.core.js script needs to go before the kendo.angular.js script:
proper script order
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/angular.min.js"></script>
<script src="kendo/js/kendo.ui.core.min.js"></script>
<script src="kendo/js/kendo.angular.min.js"></script>