Vue cli remove script injection - javascript

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
})
}

Related

Run NodeJs project using Pywebview

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?

external JavaScript File not working in angular 2

I am building a web app with Angular 2 framework and I want to use an external template. Trying to convert it into an angular2 SPA.
I need to run some scripts (custom.js). All CSS and JavaScript file are added in Index.html.
Everything is working fine except external js. JavaScripts are not working properly. But the CSS files are working. Material components and modals other JavaScript functionality nothing is working inside angular component file.
In your .angular-cli.json file you need to add the external js file under your app's scripts property.
{
// other app config
apps:[
{
// Your app config
"scripts":[
"path/to/your/custom.js"
]
}
]
}
If you would like to use the script in a component, you should declare it before the component class.
declare var customLibraryName: any;
See the Angular Cli Wiki for more details.
thanks #JosephDragovich for your fast reply. To be honest, I am a fresher in Javascript and angular 2. Following your suggestion, I updated my code as below:
javaScript not working
angular-cli.json
"scripts": [
"./src/assets/Js/jquery-2.2.4.min.js",
"./src/assets/Js/bootstrap.min.js",
"./src/assets/Js/jquery-ui.min.js",
"./src/assets/Js/jquery-plugin-collection.js",
"./src/assets/Js/custom.js"
],
my index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>LocumMedApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body class="has-side-panel side-panel-right fullwidth-page side-push-panel">
<app-root></app-root>
</body>
</html>
place script in index.html also using <script> tag.

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.

How to link javascript file to angular app html template

I am new to Angular and I have been having a problem trying to use Bootstrap or jQuery JavaScript includes. Below is a snippet of my code. Chrome developer tools tells me:
Request URL:http://localhost:4200/js/jquery.min.js
Request Method:GET
Status Code:404 Not Found
Remote Address:127.0.0.1:4200
Referrer Policy:no-referrer-when-downgrade
Am I doing anything wrong?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyTestApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<!--Load JQuery-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/plugins/metismenu/jquery.metisMenu.js"></script>
<script type="text/javascript" src="js/plugins/blockui-master/jquery-ui.js"></script>
<script type="text/javascript" src="js/plugins/blockui-master/jquery.blockUI.js"></script>
</body>
</html>
<base href="/">
refers to the root path, therefore, if you don't have those files in your root path they won't load.
You can put them in assets folder (for example) and change the src to assets/....
If you are using angular cli, the 'proper' way would be referencing them in app.scripts in .angular-cli.json
Another option would be installing the jquery library (npm install --save jquery) and declaring "$" as jquery variable.

How are scripts imported?

I've installed Angular for trying this out. I have node.js installed with npm, and I installed the #angular/cli package globally. Then I did: ng new testproject. I now have all the files installed. I did npm install and npm start and everything worked, even the app said so! (LOL).
Now, when I look into the files and see the index.html file in my ./src, there is not a lot of stuff going on.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Testproject</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
This feels strange. Angular is made with JavaScript (compiled Typescript). But when I look at the developer tools in Google Chrome, I can see that there are actually script tags inside my html.
Can someone explain me how these files got here? What is happening on the server-side, and which files make this happen? Thank you.
The <base href="/"> is the reference your looking for. If you build(ng build --prod), it will reference all the default complied scripts to this path, in the default case being root of your application.

Categories

Resources