I configured my PWA manifest.json in vue.config.js, shown below. How can I configure the PWA icons to refer to the images inside the assets/ folder?
module.exports = {
pwa: {
manifestOptions: {
name: process.env.VUE_APP_APP_NAME,
short_name: process.env.VUE_APP_SHORT_NAME,
start_url: process.env.VUE_APP_START_URL,
display: 'standalone',
theme_color: process.env.VUE_APP_PRIMARY_COLOR,
background_color: process.env.VUE_APP_BACKGROUND_COLOR,
icons: [
{
src: `src/assets/${process.env.VUE_APP_COMPANY}/logo-192x192.png`,
sizes: "192x192",
type: "image/png"
},
{
src: `src/assets/${process.env.VUE_APP_COMPANY}/logo-512x512.png`,
sizes: "512x512",
type: "image/png"
}
]
}
}
}
When I run my app, I get this error :
http://localhost:8080/src/assets/company/logo-512x512.png (Download error or resource isn't a valid image)
I don't understand why /src is set in the URL.
Use static assets from the public directory (e.g., public/img/company/logo-192x192.png and public/img/company/logo-512x512.png), which are copied as-is to the build output. Then your vue.config.js would reference them like this:
// vue.config.js
module.exports = {
pwa: {
manifestOptions: {
icons: [
{
src: `/img/${process.env.VUE_APP_COMPANY}/logo-192x192.png`,
sizes: "192x192",
type: "image/png"
},
{
src: `/img/${process.env.VUE_APP_COMPANY}/logo-512x512.png`,
sizes: "512x512",
type: "image/png"
}
]
}
}
}
Related
On my vue.js PWA, there's a manifest.json generated by Quasar.
From what I understand, the manifest generated by Quasar uses the parameters from my quasar.conf.js file:
manifest: {
name: `App name`,
short_name: `app short name`,
description: `Application description`,
display: 'fullscreen',
orientation: 'any',
background_color: '#ffffff',
theme_color: '#000000',
icons: [...]
}
The resulting compiled manifest looks like this:
{
"name": "App name",
"short_name": "app short name",
"description": "Application description",
"display": "fullscreen",
"start_url": ".",
"orientation": "any",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [...],
}
What I want to do now is to remove a parameter completely from the default manifest. Specifically, I want the parameter start_url not to show up on my compiled manifest. I can modify its value by modifying this parameter on the quasar.conf.js but I cannot completely remove it. It will always be added with the default value "start_url": ".".
Any hints how to completely remove start_url from the compiled manifest?
Update:
quasar.conf.js
const open = require('open')
const ESLintPlugin = require('eslint-webpack-plugin')
const { configure } = require('quasar/wrappers')
module.exports = configure(function (ctx) {
return {
pwa: {
workboxPluginMode: 'InjectManifest', // 'GenerateSW' or 'InjectManifest',
workboxOptions: {
exclude: [
/^.*php\/.*$/,
]
},
// for the custom service worker ONLY (/src-pwa/custom-service-worker.[js|ts])
// if using workbox in InjectManifest mode
chainWebpackCustomSW (chain) {
chain.plugin('eslint-webpack-plugin')
.use(ESLintPlugin, [{ extensions: ['js'] }])
},
manifest: {
name: `App name`,
short_name: `app short name`,
description: `Application description`,
display: 'fullscreen',
orientation: 'any',
background_color: '#ffffff',
theme_color: '#000000',
icons: [
{
src: 'icons/icon-128x128.png',
sizes: '128x128',
type: 'image/png'
},
{
src: 'icons/icon-192x192.png',
sizes: '192x192',
type: 'image/png'
},
{
src: 'icons/icon-256x256.png',
sizes: '256x256',
type: 'image/png'
},
{
src: 'icons/icon-384x384.png',
sizes: '384x384',
type: 'image/png'
},
{
src: 'icons/icon-512x512.png',
sizes: '512x512',
type: 'image/png'
}
]
},
extendManifestJson(json) {
delete json.start_url;
},
},
cordova: {
// noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
},
// Full list of options: https://v2.quasar.dev/quasar-cli/developing-capacitor-apps/configuring-capacitor
capacitor: {
hideSplashscreen: true
},
// Full list of options: https://v2.quasar.dev/quasar-cli/developing-electron-apps/configuring-electron
electron: {
bundler: 'packager', // 'packager' or 'builder',
...
}
}
})
The extendManifestJson function in quasar.config.js lets us tamper with the manifest json object allowing us to use the delete operator on any unwanted properties.
quasar.config.js
pwa: {
extendManifestJson(json) {
delete json.start_url;
}
},
My app works perfectly in dev mode, however I'm facing issues in the production environment.
My Folder Structure is like this pages > widget > _id.vue
For testing I just put a h1 tag in _id.vue file, when I run enter the url - https://app.mydomain.com/widget/xyz I get 404 errors on all files.
https://app.mydomain.com/widget/hhhhh 404
https://app.mydomain.com/_nuxt/dist/bf9e34c.js net::ERR_ABORTED 404
https://app.mydomain.com/_nuxt/dist/eb32a87.js net::ERR_ABORTED 404
https://app.mydomain.com/_nuxt/dist/cc2d21b.js net::ERR_ABORTED 404
Here is my apps nuxt.config.js file code, unable to figure out what's the issue here:
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
server: {
port: 8000 // default: 3000
},
target: 'server',
head: {
title: 'Title',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: 'my website description'
}
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ href: '../assets/styles/style.css' }, { href: '../assets/styles/videoform.css' }, { href: '../assets/styles/tailwind-responsive.css' }, { href: '../assets/styles/tailwind-components.css' }
],
script: [
{ src: 'https://js.stripe.com/v2/' }
]
},
// Global CSS: https://go.nuxtjs.dev/config-css
// <style>
// #import '../../assets/styles/style.css';
// #import '../../assets/styles/videoform.css';
// #import '../../assets/styles/tailwind-responsive.css';
// #import '../../assets/styles/tailwind-components.css';
// </style>
css: [
],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/tailwindcss
'#nuxtjs/tailwindcss',
'#nuxtjs/composition-api'
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
'#nuxtjs/axios',
],
axios: {
// proxy: true
},
// Build Configuration: https://go.nuxtjs.dev/config-build
buildDir: '_nuxt',
build: {
publicPath: '_nuxt/dist/'
}
}
When requesting those script files, nuxt uses the build.publicPath to find them. Your buildDir path tells nuxt to save the build files in _nuxt, while your build.publicPath tells nuxt that those files are located in _nuxt/dist. That's why you get a 404.
You can change the build.publicPath to match the buildDir to fix this. Or change the buildDir instead.
Nuxt Docs
Finally I figured out the problem, it was due to nginx configuration.
There was a trailing slash for the reverse proxy http://localhost:8000/
I had to remove that to fix the issue - http://localhost:8000
I recently started using ** Docusaurus2 ** for tech notes in college.
I am interested in creating one or more Docs2, Docs3.
I have seen that it is a pluging that has to be duplicated. But with my config, it doesn't generate index.html for additionals tabs.
This is my folder list for docs: docs, dev. And in the dev folder some markdown files.
My docusaurus.config.js is:
module.exports = {
title: 'ApuntEs',
tagline: 'The tagline of my site',
url: 'https://your-docusaurus-test-site.com',
baseUrl: '/',
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'warn',
favicon: 'img/favicon.ico',
organizationName: 'srlopez', // Usually your GitHub org/user name.
projectName: 'apuntes', // Usually your repo name.
themeConfig: {
navbar: {
title: 'ApuntEs',
logo: {
alt: 'ApuntEs',
src: 'img/logo.svg',
},
items: [
{
to: 'docs/',
activeBasePath: 'docs',
label: 'Docs',
position: 'left',
},
{to: 'dev/', activeBasePath: 'dev', label: 'Dev', position: 'left'},
{to: 'blog', label: 'Blog', position: 'left'},
{
href: 'https://github.com/facebook/docusaurus',
label: 'GitHub',
position: 'right',
},
],
},
footer: {
// omited
},
},
presets: [
[
'#docusaurus/preset-classic',
{
docs: {
id: 'doc',
sidebarPath: require.resolve('./sidebars.js'),
},
blog: {
showReadingTime: true,
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
},
],
],
plugins: [
[
"#docusaurus/plugin-content-docs",
{
id: 'dev',
path: "dev", // Path to data on filesystem, relative to site dir.
routeBasePath: "dev", // URL Route.
include: ["**/*.md"],
sidebarPath: require.resolve('./sidebarsDev.js'),
},
],
],
};
It looks nice, but tab Dev doesn't work. The index.html is not generated on npx docusaurus build
and this is the version I am using.
npx docusaurus --version
2.0.0-alpha.70
May some one help me?
I have js file called script.js in assets/js. Tried to include in nuxt.config.js like below:
head: {
title: pkg.name,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
],
script: [
{ src: '/assets/js/script.js', ssr: false }
]
}
But getting 'GET http://127.0.0.1:3000/assets/js/script.js 404 (OK)'.
Simply keep your script.js file into static folder, because static folder treat as root folder.
and add the path into nuxt.config.js configuration file like below
script: [
{ src: '/script.js'}
]
here is the best way that worked for me
put your script.js file in plugins folder and then go and include it in nuxt.config.js
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [
'#/plugins/script.js'
],
remember that # in nuxt.js or vue.js means root folder
In this method, your js files must be in the path static folder
and add this code to you *.vue files you want to use
export default {
head() {
return {
link: [
{
rel: "stylesheet",
href:
"/assets/css/bootstrap.css"
},
],
script: [
{
src: "assets/js/bootstrap.js",
body: true
},
],
}
}
I'd like to generate sourcemaps for jsx files that are transpiled with babelify and browserify. It seems that some sourcemaps are being generated as a base64 encoded comment at the bottom of my output file, but stacktraces do not honor them.
My grunt task looks like the following:
browserify: {
options: {
browserifyOptions: {
debug: true
},
debug: true,
transform: ['babelify']
},
app: {
src: 'src/app.jsx',
dest: 'dist/app.js'
}
},
This works for me:
browserify: {
dev: {
options: {
browserifyOptions: {
debug: true
},
transform: [["babelify"]]
},
files: {
"dist/bundle.js": "src/index.js"
}
}
},
Going to need to use grunt-exorcise to extract the map from the bundle.
Browserify recommends it
browserify: {
options: {
browserifyOptions: {
debug: true
},
debug: true,
transform: ['babelify']
},
app: {
src: 'src/app.jsx',
dest: 'dist/app.js'
}
},
exorcise: {
app: {
options: {},
files: {
'dist/app.js.map':['dist/app.js'],
}
}
},