I am working on very simple one-page html project. It's static.html that is suppose to load data from external local file and generate some graphs/charts/etc. I am using Vue and I am stuck.
My public/index.html hasdefault content like follows
<!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/png" href="img/favicon/black.png">
<title>DummyTitle</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without
JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
And there is something I do not understand. After yarn build, dist/index.html has content as follows
<!DOCTYPE html>
<html>
<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>Vue App</title>
<link href=css/app.9288aca6.css rel=preload as=style>
<link href=js/app.2c3ec05b.js rel=preload as=script>
<link href=js/chunk-vendors.6fa5766d.js rel=preload as=script>
<link href=css/app.9288aca6.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=js/chunk-vendors.6fa5766d.js></script>
<script src=js/app.2c3ec05b.js></script>
</body>
</html>
What the hell happened? Why title has changed to Vue App and where is favicon? I was looking for similar questions and problems and found nothing what would help me understand why is that.
First of all, I think there shouldn't be any specific reason to rename html file in public directory from index to dummy.
If you only need output name as dummy in dist folder, then rename html file in public folder to index and use this in vue.config.js. This will solve the issue.
module.exports = {
publicPath: '/',
indexPath: 'dummy.html'
}
If you need html file to be named as dummy, both in project structure and dist, just use this in vue.config.js. This will solve the title issue. Refer this official doc link Vue Config Docs Link
module.exports = {
pages: {
index: {
// entry for the page
entry: 'src/main.js',
// the source template
template: 'public/dummy.html',
// output as dist/index.html
filename: 'dummy.html'
}
},
publicPath: '/',
indexPath: 'dummy.html'
}
Related
This question is being asked after spending weeks and giving up multiple times on trying to solve this.
I'm developing a VSCode extension that needs to make use of the Webview API. For a while, this could be using Svelte, but now with SvelteKit released as stable and being treated as default when you do npm create svelte, I targetted to use that. After configuring the app to be static SPA with SSR turned off and using the #sveltejs/adapter-static, it seems that serving it is not the same as it was with vanilla Svelte.
This is the svelte.config.js:
import adapter from '#sveltejs/adapter-static';
import preprocess from 'svelte-preprocess';
/**
* Consult https://github.com/sveltejs/svelte-preprocess
* for more information about preprocessors
*
* #type {import('#sveltejs/kit').Config} */
export default {
preprocess: preprocess(),
kit: {
adapter: adapter({ fallback: 'index.html' }),
// ssr: false, // deprecated
csp: {
directives: {
'default-src': ['none'],
'img-src': ['{{cspSource}} https:'],
'script-src': ['{{cspSource}}'],
'style-src': ['{{cspSource}}'],
},
},
// paths: {
// base: '{{baseURL}}', // not accepted
// },
},
};
This is the built HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="content-security-policy" content="default-src 'none'; img-src {{cspSource}} https:; script-src {{cspSource}} 'sha256-N2DRY+AREasGSTE5X4BdHoEYZsaGOpTvUwTBIHmryVA='; style-src {{cspSource}}">
<link rel="modulepreload" href="/_app/immutable/start-e16b6a0f.js">
<link rel="modulepreload" href="/_app/immutable/chunks/index-0576dc7c.js">
<link rel="modulepreload" href="/_app/immutable/chunks/singletons-51070258.js">
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">
<script type="module" data-sveltekit-hydrate="45h">
import { start } from "/_app/immutable/start-e16b6a0f.js";
start({
env: {},
paths: {"base":"","assets":""},
target: document.querySelector('[data-sveltekit-hydrate="45h"]').parentNode,
version: "1672682689612"
});
</script></div>
</body>
</html>
Contrary to vanilla Svelte that would generate something like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
<meta name="viewport" content="width=device-width" />
<script src="/dist/app/main.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
That could be served through Webview like:
function getWebviewContent(webview, context) {
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
http-equiv="Content-Security-Policy"
content="${[
"default-src 'none'",
`img-src ${webview.cspSource} https:`,
`script-src ${webview.cspSource}`,
`style-src ${webview.cspSource}`,
].join(';')};"
/>
<title>My Extension</title>
<script type="module" crossorigin src="${webview.asWebviewUri(
vscode.Uri.joinPath(context.extensionUri, 'dist/app/main.js')
)}"></script>
<link rel="stylesheet" href="${webview.asWebviewUri(
vscode.Uri.joinPath(context.extensionUri, 'dist/app/style.css')
)}">
</head>
<body><div id="app"></div></body>
</html>
`;
}
The file is bit more complex now, so I can't (and shouldn't) try to rewrite it in this function.
The following are the conditions:
VSCode needs absolute paths since it has different environments and protocols. Keep in mind that an extension is served locally to every user. (context.extensionUri is IMPORTANT)
SvelteKit has its set of configurations (different from Vite) that may pose to be restrictive specially with SPA mode.
Content Security Policy for Webview is also restrictive to what and what can't be used.
Probably due to Vite, the file names have hashes, so it's not consistent - but I'm preferring to keep that.
The script block in the HTML (may also need a nonce) is importing the start function relatively as a module.
Instead of writing another template as a string for VSCode that would need to be maintained, it would be ideal to have the generated HTML read into VSCode and served. Using Mustache seems good (hence you see {{cspSource}} in the HTML above).
How would one suggest to architecture and integrate this?
I am making a React app using Snowpack. Everything works correctly, the build is also successful. But when I am tying to open the index.html of the build, the page is blank.
I have found a temporary fix, by modifying the index.html from the build folder.
Original index.html build code (Blank page):
<!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>React page</title>
</head>
<body>
<div id="root"></div>
<script src="/js/webpack-runtime.0ec3dfa59e6510ed107b.js"></script><script src="/js/lib-react-dom.743af248c46307798cb8.js"></script><script src="/js/index.6929e3680f85299b6d65.js"></script>
</body></html>
and here is the modified one that is working:
<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>React page</title>
</head>
<body>
<div id="root"></div>
<script src="./js/webpack-runtime.0ec3dfa59e6510ed107b.js"></script><script src="./js/lib-react-dom.743af248c46307798cb8.js"></script><script src="./js/index.6929e3680f85299b6d65.js"></script>
</body></html>
The trick is to replace src=/js/xxxxx.js to src=./js/xxxxx.js
The problem is that is very annoying to modify each time you build the project so is there any way to fix this ?
Here is my snowpack.config.js code:
module.exports = {
devOptions: {
port: 3000
},
mount: {
src: "/dist",
public: {url: "/", static: true}
},
plugins: [
[
'#snowpack/plugin-webpack', {
htmlMinifierOptions: false
}
]
]
}
and the script tag of my index.html:
<script src="./dist/index.js" type="module"></script>
Thanks in advance for the help !
I think you are pointing the public scripts load URL to be at the root of your computer, not the place that your scripts have been put!
I think if you change your mount.public to this:
public: {url: "./", static: true}
It should work correctly!
I am trying to host my angular app into my OpenLiteSpeed but I am not getting anything.
To create the app for production I use: ng build --prod, automatically it creates all the files I need in the dist folder.
Next, I move all these files to my root folder on the server.
Finally, I check if the webpage is working but it doesn't shows anything just the blank page!
The HTML code for the index is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ConFusion</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.c3adc567aae88948c2ab.css"></head>
<body>
<app-root></app-root>
<script src="runtime.acf0dec4155e77772545.js" defer></script><script src="polyfills.35a5ca1855eb057f016a.js" defer></script><script src="main.9a959de356bd26498a0e.js" defer></script></body>
</html>
How can I set deployment path in Svelte?
I would like to use it on the webserver in different path like
https://example.com/somewhere-else/index.html
But now right after i run npm build, I must use it like:
https://example.com/index.html
It must be something in the rollup.config.js but I cannot find it out.
I imagine you are using the standard svelte template?
https://github.com/sveltejs/template
The bundles it creates are not restricted to a specific path. You just need to put them in the appropriate path and update the link and script tags in the index.html file appropriately:
<!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'><!-- change this -->
<link rel='stylesheet' href='/global.css'><!-- change this -->
<link rel='stylesheet' href='/build/bundle.css'><!-- change this -->
<script defer src='/build/bundle.js'></script><!-- change this -->
</head>
<body>
</body>
</html>
Does this answer your question, or is your problem more complicated?
I have a curious error while i try to download an apk file with a website in vue :
Based on How to download a locally stored file in VueJS, i try to download a local file with this command :
Download
But no matter what i put in href, the file download is always this file :
<!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>client_web</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css">
<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 client_web 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 don't understand where this file come from, and how to make my link download the apk file.
Edit: vue.config.js
"transpileDependencies": [
"vuetify"
],
chainWebpack: config => {
config.module
.rule('apk')
.test(/\.(apk)$/)
.use('apk-loader')
.loader('apk-loader')
.end();
}
}
Directory Tree:
│ └──views
│ └──APKDownload.vue
└──app-debug.apk```
There could be 2 problems:
Server does not allows you to download '.apk' files.
There is a path problem. The fastest way to check it is in DevTools/Network, what url is used to download file as you use ../../app-debug.apk.