I am seeking to better understand PWAs with React, and one topic I am getting stuck on is the __WB_MANIFEST.
I've found that this is required by the Workbox CLI, and is used for precaching files, which is great. It defaults to containing the list of static files built by React, and that makes sense to me.
But is this list customizable? What situations might I want to edit the C-R-A default value? And can I edit it in v4?
Relevant C-R-A doc: https://create-react-app.dev/docs/making-a-progressive-web-app/#customization
Yes, it's customizable, but not out-of-box in cra (proposal, unmerged PR). To config workbox without ejecting, you might want
react-app-rewired
// config-overrides.js
module.exports = function override(config, env) {
if (env === 'development') return config;
const workboxConfig = config.plugins.slice(-1)[0].config;
workboxConfig.exclude = [/.*\.txt/];
// other config...
return config;
};
Or customize-cra:
// config-overrides.js
module.exports = override(
adjustWorkbox(wb =>
Object.assign(wb, {
exclude: (wb.exclude || []).concat("index.html")
// other config...
})
);
);
What situations might I want to edit the C-R-A default value?
Just as examples above, mostly, when you want to exclude something in precache manifest.
Related
I tryed to replace momentjs in project on antdv, and find this advice:
"We also provide another implementation, which we provide with
antd-dayjs-webpack-plugin, replacing momentjs with Day.js directly
without changing a line of existing code. More info can be found at
antd-dayjs-webpack-plugin."
https://2x.antdv.com/docs/vue/faq
So then i tryed to do same steps like in instruction https://github.com/ant-design/antd-dayjs-webpack-plugin. But i just changed webpack-config.js on vue-config.js and in code:
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
module.exports = {
plugins: [
new AntdDayjsWebpackPlugin()
]
}
// on
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
module.exports = {
configureWebpack: (config) => {
config.plugins.push(
new AntdDayjsWebpackPlugin(),
);
}
}
But then i got mistake 502 Bad Gateway.
If i deleted configureWebpack mistake was still there. And then i deleted require and mistake was gone.
Also i found what in page with this plugin there was word about React but not about Vue.
So i had few questions:
Is it possible to use DayJs in antdv DatePickers? With plugins or any ways.
Is it mistake in FAQ? How i can tall about this issue (if it is)? I didnt found any method to communicate with them.
I want to use htmlWebpackPlugin.options.title in SFC template, is that doable?
Yes it's doable ...but other way around
You can use Environment Variables do define your app title
Then you can configure htmlWebpackPlugin to use this ENV variable as the value for title option
At the same same time, you can use use this variable in any client side JS (be it pure JS or SFC). Note that to use it inside the template, it's necessary to assign it
to the data first...
.env file
VUE_APP_TITLE=My App Title
vue.config.js
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = process.ENV.VUE_APP_TITLE
return args
})
}
}
SFC
data() {
return {
title: process.ENV.VUE_APP_TITLE
}
}
document.title will do, Michal's solution will do too in a verbose but more strict and flexible format, see which one works best for you.
a little strange question, but how to remove comments from the file chunk-vendors.js? I mean, there are automatically placed licenses and other information about plugins, including the vue, vuex, vue-router.
Is there any parameter responsible for this? I’m tired of removing these lines manually after each build
I use vue-cli
Assuming Vue CLI 3 or newer, this is handled by the minimizer's (terser) output options. Specifically, set output.comments=false to exclude comments from the minified output.
Edit vue.config.js to include:
module.exports = {
chainWebpack: config => {
config.optimization.minimizer('terser').tap((args) => {
args[0].terserOptions.output = {
...args[0].terserOptions.output,
comments: false // exclude all comments from output
}
return args
})
}
}
following https://nuxtjs.org/api/configuration-env
I have been trying to set up my apiUrl in nuxt.config.js once for the whole project, like:
export default {
env: {
apiUrl: process.env.MY_REMOTE_CMS_API_URL || 'http://localhost:1337'
}
}
adding this in nuxt.config.js, I'd expect (and would like) to have apiUrl accessible everywhere in the project.
In particular, it is needed for the 3 following cases:
with axios, to generate static pages from dynamic urls (in nuxt.config.js)
generate: {
routes: function () {
return axios.get(apiUrl + '/posts')
.then((res) => {
return res.data.filter(page => {
return page.publish === true;
}).map(page => {
return {
route: '/news/' + page.slug
}
})
})
}
},
with apollo, to get data via graphql (in nuxt.config.js)
apollo: {
clientConfigs: {
default: {
httpEndpoint: apiUrl + '/graphql'
}
}
},
in every layout, page and components, as the base url of media:
<img :src="apiUrl + item.image.url" />
As you might see, only thing I need is to 'print' the actual base url of the cms.
I have also tried to access it with process.env.apiUrl, with no success.
The only way I was able to make it has been to create an extra plugin/apiUrl.js file, which injects the api url, and seems wrong to me as I am now setting the apiUrl twice in my project.
I asked this question in the past, but in a way less clear way. I was suggested to use dotenv, but from the docs it looks like adding an additional layer of complication that might not be necessary for a simpler setup.
Thanks.
I think dotenv module really is what you need.
This is my setup:
Project root has a .env file that contains
BASE_URL=https://www.myapi.com
require('dotenv').config() at top of nuxt.config.js
#nuxtjs/dotenv installed and added to buildModules of nuxt.config.js
env: { BASE_URL: process.env.BASE_URL} added to nuxt.config.js
axios: { baseURL: process.env.BASE_URL } added to nuxt.config.js (optional)
You should have access to your .env throughout the project. (process.env.BASE_URL)
I haven't used apollo, but you should be able to set the apollo endpoint with process.env.BASE_URL + '/graphql'
As of Nuxt 2.13, #nuxtjs/dotenv is not required anymore. Read here
The concept that I was missing is that you set up the same named variable in your server / pipeline, so that you have your (always local / never pushed) .env file and a same name variable remotely, not added to your repo (where the value can be the same or different)
I'm using mirage to mock some data and I'd like to mock an <img> with the appropriate file.
The problem is that I will have to place the image in /public/assets and the images placed there will be deployed later on as well.
Is there a way to avoid this? I couldn't find a recommendation in the ember cli website (https://ember-cli.com/user-guide/#asset-compilation)
I found one addon that could do this (ember-test-assets), but I'd like to avoid installing extra addons as much as possible.
Thanks!
You can exclude files in ember-cli-build.js with some help of Broccoli
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const Funnel = require('broccoli-funnel');
module.exports = function(defaults) {
let app = new EmberApp(defaults, {
// Add options here
});
// Filter your test files in 'production'
if (EmberApp.env() === 'production') {
return new Funnel(app.toTree(), {
exclude: ['**/test-*'] // e.g. any file prefixxed with 'test-'
});
}
return app.toTree();
};
References:
EmberApp.env(): https://github.com/ember-cli/ember-cli/blob/d97d96aa016fbe8108c2d2744c9823a0ea086b94/lib/broccoli/ember-app.js#L469
broccoli-funnel: https://github.com/broccolijs/broccoli-funnel (see exclude)