CODEWITHSUNDEEP
vue.jswebpackmanifestnetlify
mrcode
mrcode

Reputation: 505

Change properties in manifest.json file on build

I have a website with 2 domains like Page1.com and Page2.com. In my manifest.json file i have set the name to Page 1, but when the website is build and published to Page1.com and to Page2.com i want to change the name to be the same as the domain name. But how can i do this in my build step? Today i se Page 1 when i visit Page2.com.

I have tried to change the meta, application-name in my code to get the correct name, but this don't work.

My vue.config

const manifestJSON = require('./public/manifest.json')


module.exports = {
pluginOptions: {
i18n: {
  locale: 'en',
  fallbackLocale: 'en',
  localeDir: 'locales',
  enableInSFC: true
}
},

runtimeCompiler: true,

pwa: {
themeColor: manifestJSON.theme_color,
name: manifestJSON.short_name,
msTileColor: manifestJSON.background_color,
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black',

workboxPluginMode: 'InjectManifest',
workboxOptions: {
  swSrc: 'service-worker.js',
  exclude: [
    /_redirects$/
  ]
}
}

}

This site is build with VueJs and use Netlify as host.

Upvotes: 0

Views: 2362

Answers (2)

lbragile
lbragile

Reputation: 8122

The easiest way is to use process.argv to get a command line argument.

For example if you command to run the file is:

node file.js

Then using:

node file.js env_variable_str

Will have process.argv[process.argv.length - 1] === "env_variable_str"

In my case the manifest had to change not just the value but also add/remove a key depending on the argument. So I made a template (manifest_template.json) and used a "build helper" to create the correct manifest based on my argument in the public/ folder. Then I chained this command with npm run build and had another chaining command which made the zip folder.

My workflow: create manifest.json in public -> npm run build -> make zip with correct name

Let me know if you want to see the code!

Upvotes: 0

nibnut
nibnut

Reputation: 3127

So the manifest file is generated by vue-cli every time you build your app. So you shouldn't be using it to seed the vue-config file.

The one file that you could use the way you have shown here would be your package.json file - but it won't hold the values you are looking for.

Your Vue.config file is where you would enter, manually, the pwa info like theme and background color, etc.

To get back to your initial question, you could create two separate build scripts in your package.json, one for page1 and one for page2, and use environment variables to specify the name you ant to use:

"scripts": {
    "page1": "env SITE_NAME='Page 1' npm run prod",
    "page2": "env SITE_NAME='Page 2' npm run prod",
    ...
}

Then in your vue.config file, you can use the variable to build your pwa object:

pwa: {
    name: process.env.SITE_NAME,
    ...
}

Finally, you can build your apps by calling

npm run page1

Be careful though: every build will overwrite your public folder! Depending on your context, how/when you build each app, you may have to take additional steps to generate two separate output folders.

Upvotes: 1

Related Questions