I have a problem when loading jquery on electron.
The problem only exists when on main.js I put
mainWindow.loadURL('http://localhost:3000/menu');
and I send back the menu.html
however, when I use this method Jquery works fine
mainWindow.loadURL('ile://' + __dirname + '/menu.html');
I need it to work using localhost.
This is a known problem. It is because JQuery auto-senses the presence of node.js - Electron adds a node.js context to the browser so JQuery gets confused.
The best approach is to install JQuery via npm, use electron-rebuild then change your html file to look like:
<!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">
<title>My Electron App</title>
<link href="stylesheets/main.css" rel="stylesheet" type="text/css">
<link href="./node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css">
<script src="helpers/context_menu.js"></script>
<script src="helpers/external_links.js"></script>
</head>
<body>
<div class="container">
<h1 id="greet"></h1>
<p class="subtitle">
Welcome to Electron app running on this magnificent <strong id="platform-info"></strong> machine.
</p>
<p class="subtitle">
You are in <strong id="env-name"></strong> environment.
</p>
<div class="jumbotron">
<h1>Bootstrap Test</h1>
<p>
Some content that should be in a Bootstrap "jumotron" box.
If it isn't, check your html code to make sure that the Bootstrap css is loaded.
Also check the dev console in the app to look for errors.
</p>
</div>
</div>
<script>window.$ = window.jQuery = require('jquery');</script>
<script src="app.js"></script>
</body>
</html>
This is a standard boilerplate but with the special JQuery loader script and app.js loader moved to after that in case you are doing anything in your normal app script that requires jquery - for example, loading Twitter Bootstrap can now be done by using npm to install bootstrap, doing electron-rebuild, then using this in your app.js:
import bootstrap from 'bootstrap';
Related
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.
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
})
}
I need to run a Svelte app and be able to execute it without a server.
With other frameworks this is possible as it is just javascript but I can't find a way to just click my index.html and run my app built with Svelte
I need to run a Svelte app and be able to execute it without a server. With other frameworks this is possible as it is just javascript but I can't find a way to just click my index.html and run my app built with Svelte
I'll break it down into two components, building and executing the svelte app.
Firstly, you require a computer to build the Svelte app as it executes rollup (and runs a node server) to perform the compilation, but this isn't what the OP is asking for...
To address the execution of the Svelte app, you can execute this without a running server.
Please see attached
You are given a npm run build from the Svelte create-svelte app generate command which outputs a public.html.
This can be used to host the file say, on Surge.sh, however to make this "local file friendly", You will need to edit the outputting html to the following (i.e. remove base /).
original source index.html
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='global.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<script defer src='/build/bundle.js'></script>
Final html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Svelte app</title>
<link rel='icon' type='image/png' href='favicon.png'>
<link rel='stylesheet' href='global.css'>
<link rel='stylesheet' href='build/bundle.css'>
<script defer src='build/bundle.js'></script>
</head>
<body>
</body>
</html>
If you're using Svelte (not SvelteKit) and has a single page only. You can use https://github.com/richardtallent/vite-plugin-singlefile to merge everything into one file on build, and it will then work through file://
I'm testing React-boilerplate and I'm trying to load some javascript files in the app/index.html file:
<!doctype html>
<html lang="en">
<head>
<!-- The first thing in any HTML file should be the charset -->
<meta charset="utf-8">
<!-- Make the page mobile compatible -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Allow installing the app to the homescreen -->
<link rel="manifest" href="manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<script type="text/javascript" src="myJScriptFile1.js"></script>
<script type="text/javascript" src="myJScriptFile2.js"></script>
</head>
<body>
<!-- Display a message if JS has been disabled on the browser. -->
<noscript>If you're seeing this message, that means <strong>JavaScript has been disabled on your browser</strong>, please <strong>enable JS</strong> to make this app work.</noscript>
<!-- The app hooks into this div -->
<div id="app"></div>
<!-- A lot of magic happens in this file. HtmlWebpackPlugin automatically includes all assets (e.g. bundle.js, main.css) with the correct HTML tags, which is why they are missing in this HTML file. Don't add any assets here! (Check out webpackconfig.js if you want to know more) -->
</body>
</html>
This is the default index.html file. I'm running it with npm or yarn and the server console shows me no error, but my browser console keeps telling me:
Uncaught SyntaxError: Unexpected token <
Just like this, there is no more error. These javascript files work fine because I'm using them into another React based project, and I'm calling them into the index.html file as well. The console prints that error per file. If I trace the error it leads me to the correspond .js file.
After almost a week searching the web I couldn't find a solution. So that's it, does anybody have any idea on how to solve this?
Well, I'm answering myself. I needed a little bit more of research in webpack. I achieve this through webpack:
installed npm i add-asset-html-webpack-plugin -D
then, in the webpack config file, under plugins I added:
new AddAssetHtmlPlugin({ filepath: require.resolve('./some-file') })
and that's it.
I've installed searchkit (https://github.com/searchkit/searchkit) and have been trying to just get a basic webpage to show something. I have very little experience with Javascript and web development in general and would appreciate some help and guidance.
I installed SearchKit via bower and then simply copied out the bundle.js and theme.css into my project, just to see it work.
I have the following directory structure:
appHome/
index.html
js/
searchkitbundle.js
bundle.js
css/
theme.css
I copied bundle.js and theme.css from the release directory of the bower installation. I copied searchkitbundle.js from the from the live editor on SearchKit's docs website (http://docs.searchkit.co/stable/docs/setup/project-setup.html).
Here is my index.html code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//cdn.jsdelivr.net/react/0.14.7/react.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/react/0.14.7/react-dom.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/searchkit/0.10.0/bundle.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/searchkit/0.10.0/theme.css">
<title>JSP Page</title>
</head>
<body>
<script type="text/javascript" src="js/bundle.js"></script>
<div id="app">
<div class="search">
<div class="search__query">
<SearchBox/>
</div>
</div>
</div>
</body>
I have tried changing this in a variety of ways but can't get it to work. It worked once, but I can't seem to get it to do so again.
I don't see any errors, either in the browser or in my IDE. I'm deploying this locally as well as another copy of it within a Tomcat JSP application.
Can anyone see what I'm doing wrong here and get it to work?