Using Vite 3 with vue/typescript/vuetify, I am running lighthouse on Chrome dev tools, and I get these errors. The vite preview html looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="apple-touch-icon" href="/favicon.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#6E2D91">
<meta name="description" content="Sample Web App">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<script type="module" crossorigin src="/assets/index.79acedba.js"></script>
<link rel="stylesheet" href="/assets/index.4a576584.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
The original html file was
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="apple-touch-icon" href="/favicon.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#6E2D91">
<meta name="description" content="Sample Web App">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
How can I fix these?
Related
Trying to get env values from public/index.html file
Tried with window.APPDYNAMICS_KEY from config.js
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<script src="src/config.js"></script>
<script charset='UTF-8'>
if(window.APPDYNAMICS_KEY){
....
src/config.js
export default {
STAGE: process.env.NODE_ENV || 'development',
...
APPDYNAMICS_KEY: process.env.REACT_APP_APPDYNAMICS_KEY,
};
.env
...
REACT_APP_APPDYNAMICS_KEY=SAMPLE-KEY HERE
HTTPS=true
Turns out i didn't have to import any script.
Just use the following '%REACT_APP_APPDYNAMICS_KEY%' in my index.html
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<script charset='UTF-8'>
if('%REACT_APP_APPDYNAMICS_KEY%'){
....
.env
...
REACT_APP_APPDYNAMICS_KEY=SAMPLE-KEY HERE
HTTPS=true
Hi I am trying to add a start button via jquery to appear when the page loads. However, the button is not loading.
Here is my code:
$(window).on('load', function() {
const startPage = $("<button id='start'>Go</button>");
$('main').append(startPage);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Quiz</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" type="text/css" />
<link href="app.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h1>Objective London Quiz</h1>
</header>
<main class="questions"></main>
<script src="https://code.jquery.com/jquery-3.4.1.slim.js" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
In my AspNetCore 3.1 web application, I added required js and css references to my project for Bootstrap notification. But I'm gettin this error when I call the notify function.
Here is my css references:
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title></title>
<link href="~/css/styles.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/dataTables.bootstrap4.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-notify/0.2.0/css/bootstrap-notify.min.css" />
</head>
Here is my js references
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.5/jquery.inputmask.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.4/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-notify/0.2.0/js/bootstrap-notify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js"></script>
<script src="~/js/scripts.js"></script>
Bootstrap notify call:
$.notify({
title: 'Hello World',
message: 'Hello :)',
type: 'success'
});
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Desktop App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<link href="assets/style.css" rel="stylesheet">
<link href="assets/overlay.css" rel="stylesheet">
<link rel="stylesheet" href="assets/bootstrap.min.css" />
<link href="assets/material-icons.css" rel="stylesheet">
<base href="./">
</head>
<body>
<app>
Loading
</app>
<script src="js/ajax-d3.min.js"></script>
<script src="js/ajax-nvd3.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/desktop.min.js"></script>
</body>
</html>
when I load this html on browser material floating label is working fine but when i load it with electron it stops working ..
It should work like
but its working like
please help !!
I have the follow code:
app.middleware('files', '/lib', loopback.static(path.normalize(__dirname + '/lib')));
But I am getting this error on cosole:
Failed to load resource: the server responded with a status of 404 (Not Found)
Any idea why? The location of my css files is correct and the file is there.
Thanks
I am trying to integrate Raneto with Loopback, if someone can give me a hand I would apretiate it.
Here my html code:
<!DOCTYPE html>
<html lang="{{config.locale}}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{#meta.title}}{{meta.title}} - {{/meta.title}}{{config.site_title}}</title>
{{#meta.description}}<meta name="description" content="{{meta.description}}">{{/meta.description}}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon", href="http://buildmetric.com/favicon.ico?v=2">
<link rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="{{config.base_url}}/lib/highlightjs/styles/solarized_light.css">
<link rel="stylesheet" href="{{config.base_url}}/styles/raneto.css">
<link rel="stylesheet" href="{{config.base_url}}/styles/ghostdown.css">
<link type="text/css" rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/animate.css" />
<link type="text/css" rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/hover.css" />
<link type="text/css" rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/style.css" />
{{{config.analytics}}}
</head>
<body class="{{body_class}}">
Full path:
http://localhost:5000/lib/bootstrap/dist/css/bootstrap.min.css