Run NodeJs project using Pywebview - javascript

I've a project builded in NodeJs and what im trying to do is running using pywebview library.
Pywebview allow us to create a server and run the project using a WindowForm..
Example:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<title>Document</title>
</head>
<body>
<div id="tvchart"></div>
</body>
<script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
<script src="index.js"></script>
</html>
app.py
import webview
webview.create_window('App', 'index.html', js_api=None, width=800, height=600, min_size=(200, 100))
webview.start(debug=True,http_server=True)
So, in this case using a simple HTML with some js and his dependecies running app.py, it works perfectly, create a windowform and then show the HTML with all the js function.
But if this project is builded in NodeJs i get some trouble.
Mainly i run a project NodeJs using the command line npm run dev. so the command create a server like localhost/80, but i dont know how to implement NodeJs and pywebview in the same project. Any suggestion?

Related

React not loading, It also doesn't recognize document commands

Extremely simple HTML and javascript set up for React.js not working. I followed exactly the instructions on the react website but it is not working. I would appreciate if anyone can see any error.
Below is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react#17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="file1.js"></script>
</body>
</html>
Even the document.getElementById command is not working as shown in the error message on the screenshot below:
Windows 10 32bit, Visual Studio Code.
I hope this finds you well.
You better use any of the NPM react app creating commands, to create your react app. Like npx create-react-app and it will then have the NPM modules that require you to get that root ID you are trying to get using vanilla/backbone js document.getelementbyid while that is not how the root is called. Using the boiler plate that NPM gives you, you can import react and reactdom then to manipulate that single HTML that react renders to the client.
I hope this is the answer to your question.

Vue cli remove script injection

I am using vue cli within wordpress. Wordpress has it's own way of adding scripts to the DOM. Because of this I do not need vue cli to add the script the final index.html file. When I run npm run build I get something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<title>my-app</title>
<link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
<body>
<noscript>
<strong>We're sorry but my-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>
I want when I run build to not have the tags and css injected. What's happening is when the html file is run I get a bunch of 404 errors. So it would be great if there is a way to stop the injection completely but still build the actual bundle files.
You can do that by disabling injection in the HTML Webpack Plugin options. Add the following to your vue.config.js file.
chainWebpack: (config) => {
config.plugin('html').tap((args) => {
args[0].inject = false
return args
})
}

How do you render custom variables into HTML with webpack-dev-middleware?

I use Webpack to compile my JS which is then loaded via bundle.js via a template string sent via express.
The only problem is, I can't find information on how to render custom html while also using webpack-dev-middleware to watch and compile bundle.js.
My HTML is being sent with the following code:
app.use('*', (req, res) => {
res.send(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Title</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="main"></div>
<script type="text/javascript">window.__userData=${JSON.stringify(req.user)}</script>
<script src="/bundle.js" type="text/javascript"></script>
</body>
</html>`);
});
So, I have no idea how I can keep/use this while using webpack-dev-middleware for the bundle.js, since what I tried to do was just add app.use as per webpack-dev-middleware before the above snippet, though it did not work, failing with the error of bundle.js being of the wrong mime type text/html, thus not executable.
EDIT
The server-side rendering option for webpack-dev-middleware is experimental and not what I'm looking for, I don't need raw bundle.js to send with html.

Angular2 application build, but file not found while loading the css, js folders

I have an angular2 application which uses nodejs server api's.
I build the app using nd b, which created the files in dist folder. Where can I specify the production url for the production build, so that all the css, js files loads properly.
And also, whether I need apache server to host these build. Or Can I use node server itself to host it?
Index.html:
<!doctype html>
<html>
<head>
<base href="/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="assets/styles/css/custom.css"/>
<script src="assets/vendor/pace/pace.js"></script>
</head>
<body>
<app-root>
<div class="loading"></div>
</app-root>
</body>
</html>
Thanks
By analyzing your html file i am seeing an issue with the <base>tag.
You need to provide ./ instead of /which is wrong.
Corrected html document is given below.
<!doctype html>
<html>
<head>
<base href="./"> <!-- use ./ instead of / -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SHEPHERD SHIELD</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="assets/styles/css/custom.css"/>
<script src="assets/vendor/pace/pace.js"></script>
</head>
<body>
<app-root>
<div class="loading"></div>
</app-root>
</body>
</html>
For development and testing purpose you can specify the urls for the css from the dist folder. If you are going for production, then you can copy the minified version of css and js files and put them in style and js folders for example, also set the urls in the html file from these folders.

IE-11 Issue - Failed to instantiate module myApp due to: Error: [$injector:modulerr] Failed to instantiate module adComponents

I am facing an issue while running my AngularJS application in IE11.
When application runs in debugger mode, it does it properly. The issue comes only when I run it normally not in debug mode.
Also, I noticed that, if I run it without deploying it on server, it works perfectly fine. The issue comes only in deploy mode (To run it in deploy mode I made a grunt task that minifies the application and deploys it on server).
Here is my index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Stylesheets -->
<link href="styles/css/ncs_components.css" rel="stylesheet" type="text/css">
<link href="styles/css/adv_master.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<![endif]-->
<script src="scripts/ext/require.js" data-main="scripts/main.js">
</script>
</body>
</html>
How can I solve this?

Categories

Resources