I am using Workbox through the Webpack plugin. My package.json reads like:
"webpack": "^4.43.0",
"workbox-webpack-plugin": "^6.5.3",
I have a cache for URL's matching /flows/<whatever>, except /flows/reconciliation_invoices.
Following the instructions here, I created the following regex:
\/flows\/(?!reconciliation_invoices)
In Regex 101 it works well. Here is the screenshot:
The same regex works well inside the JavaScript code, but I have to use it in the configuration of Workbox. In my Webpack config file I put:
{
urlPattern: /\/flows\/(?!reconciliation_invoices)/,
handler: 'CacheFirst',
options: {
expiration: {
maxAgeSeconds: TEN_MINUTES,
},
cacheName: 'flows_stuff',
},
},
And here begin the troubles...
This regex is not respected by Workbox. My service worker continues to cache /flows/reconciliation_invoices.
I have deleted the cache; I have unregistered the service worker multiple times. It seems Workbox 6 does not respect negative lookahead in regexes, which sounds incredible to me.
I suspect that Workbox core executables do not follow the JavaScript regex syntax, but this is just a long shot.
What can I do to have the /flows/reconciliation_invoices calls not cached by Workbox?
Whatever strategy is welcome.
Related
I'm building a Vue.js application using Vuexy BootstrapVue template, deployed in a Docker container.
I am finding that when we deploy updates to our web app, that the User has to do a hard-refresh in their browser to load the latest version of the app, otherwise they'll be navigating around a cached version.
Is there a way for me to force a client browser to load the latest version for a User?
Either on every load, or every few hours?
(I've tagged Bootstrap-Vue for transparency, but don't actually know if it has any bearing on this issue)
You are facing the cache problem and there is multiple ways to handle this.
Cache Control
You can control the cache with the header with max-age or no-store, no-cache to simple disable it, like this question/answer: How do we control web page caching, across all browsers?
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
https://csswizardry.com/2019/03/cache-control-for-civilians/
Cache busting
Aappending a version (example: 1.0.0) to query string of the script tag:
<script src="path/to/your/app.min.js?v=1.0.0"
and change that version for every build.
Hashing the script file
You can also use some webpack/rollup config to build the script with a hash, like app.bf43112.js
webpack
const config = {
output: {
path: PATHS.build,
filename: "[name].[contenthash].js",
},
};
Rollup
const isProduction = process.env.NODE_ENV === 'production';
export default {
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: isProduction ? 'bundle[hash].js' : 'public/build/bundle.js',
}
};
Reference: Hashed file names using Rollup
Service Worker
Another solution, that I never tested, but sounds a good method.. is creating a service worker to control how retrieve the js file:
https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker
You can do things like deleting the cache, responding the cache with a response that you manually fetch with js, etc.
I'm updating an older Webpack2 project to Webpack4 and switching the tests over to Jest but have a seemingly simple problem with a couple of the webpack related bits.
Specifically, the project structure for the troublesome bits look like this:
src
- constants
- index.js
- config
- base.js
- test.js
- dev.js
- dist.js
During testing, the classes under test use import config from 'config' so issue number one is allowing them to find the right config file. With Webpack2 this is subbed in by webpack itself, but obviously not during Jest tests.
I can resolve this by hard coding the specific test config into the moduleNameMapper in the jest config in package.json like so:
"jest": {
"moduleNameMapper": {
"^config$": "<rootDir>/src/config/test.js"
}
}
This appears to work.
The second part of my issue is allowing Jest to find named exports src/constants/index.js using syntax like import { SOME_CONST } from 'constants'.
When I try to use moduleNameMapper I get back undefined from anything that uses the constants and I believe this is because moduleNameMapper is largely used to mock out dependencies rather than supply them.
With this in mind I think I need to use modulePaths or moduleDirectories to allow the constants to be located.
I've tried the following configurations (not simultaneously) without any luck:
"modulePaths": [
"<rootDir>/src/constants",
"src/constants"
],
"moduleDirectories": [
"node_modules",
"src",
"src/constants",
"/src/constants"
"/src/constants/",
"./src/constants"
],
What should the correct config be for Jest to locate my constants?
If it's any help I'm trying to mimic this Webpack2 config in Jest
resolve: {
alias: {
constants: `${this.srcPathAbsolute}/constants/`
}
}
I am a webpack newbie and have a question about testing.
I have a project which uses webpack, typescript and karma as test runner and I would like to run my tests on every file change (e.g. in "watch" mode)
I am aware of karma-webpack and it works well when I run karma as own process (karma start ...)
But what I want is to integrate karma in the webpack flow.
So, from my naive point of view, I thought karma has to be defined in preloading of webpack (such as a linter).
But I found nothing....
I can not believe that this common workflow is not possible (run tests on every source change)
Can anybody of you give me a suggestion?
Time flies and it's June 2018 already. As there isn't much documentation about this online I want to give out my 2 cents.
I have currently a setup working where I bundle my tests with webpack a watch for changes in order to rerun automatically the tests.
I'm using karma-webpack using the configuration explained in the Alternative usage section and I think it's the proper way to solve the problem asked in the question.
karma.conf.js
{
...
files: [
// only specify one entry point
// and require all tests in there
'test/index_test.js'
],
preprocessors: {
// add webpack as preprocessor
'test/index_test.js': [ 'webpack' ]
},
...
}
test/index_test.js
// require all modules ending in "_test" from the
// current directory and all subdirectories
const testsContext = require.context(".", true, /_test$/)
testsContext.keys().forEach(testsContext)
Watching for changes of the whole bundle as #Adi Prasetyo suggests is wrong in my opinion. We should only watch for changes in the tests files and the files that are imported inside them, which can be achieved with configuration shown in the last URL.
Very important for hot reloading to work (at least in my case it was what made it work), you need to setup webpack-dev-middleware configuration in order to update the tests bundle everytime a change happens in some test file or the files being imported inside them. This is the config I'm using:
karma.config.js
{
...
webpackMiddleware: {
watchOptions: {
aggregateTimeout: 300,
poll: 1000, // customize depending on PC power
},
},
...
}
More info about it here.
I have same problem, as the TDD workflow that i use. After writing test then change the code the test doesn't re-run. Run test on every file change is possible.
As karma files have 3 options: Included, served, watched.
You can specify the bundle as pattern then tell karma to watch it
karma.config.js
files: [
// watch final file so when source change and it's final file, re run the test
{ pattern: './dist/js/*.wp.js', watched: true},
],
but when we use karma start no webpack active and watching. So use concurrently to run karma and webpack. Note that webpack should watch only the source code and karma should watch the bundle file.
Then we can add script property to package.json like so
package.json
"scripts": {
"test": "karma start karma.config.js",
"build": "webpack",
"dev": "concurrently \"webpack --progress --colors --watch\" \"karma start karma.config.js --colors\"",
},
Then run npm run dev to start coding
Well I've never heard of webpack up until now, but I know karma fairly well. I'm not 100% sure what you are asking here, so let me know if this isn't helpful at all. You can setup karma to do exactly what you want it to do (run tests on every file change).
There are two options that you must set in the karma.conf.js file: autoWatch: true and singleRun: false.
karma.conf.js
module.exports = function(config) {
config.set({
// set other options and stuff...
autoWatch: true,
singleRun: false
});
};
autoWatch set to true enables watching files and executing tests whenever any file changes. Setting singleRun to false means that you only need to execute karma start (or however you integrate it into webpack) once to run your tests, instead of having to enter the command every single time you make a change or want to run your suite; it just keeps karma running in the background.
i've been studying up on webpack for a couple of weeks now, and i've seen many examples of front end setups, and probably just this one setup for a backend.
i'm trying to setup a react app with a node back-end (e.g. express, koa, hapi, etc) where i would need at least one transpilation step for the back-end (e.g. babel, coffeescript, etc), and i think it would be nice to use webpack there for consistency vs adding another build mechanism to the mix (e.g. gulp, grunt, etc).
it would also be great if i could make changes to the backend and have the server restart automatically (watch style).
i'm wondering if the best way to do that is to basically have two distinct project setups with their own package.json and webpack.config files. maybe nest the back-end one under a server folder in the top level project folder, and use one or more script directives in the top level package.json file to control the two.
i guess i might have to proxy one server to the other to avoid CORS issues as well.
looking for any guidance from those more webpack battle tested than i for a decent setup.
regards,
tony.
Easiest way is to split this into two tasks: a build step that outputs to a folder (e.g. 'server'), then watch the output folder for changes and restart server task.
1. Build task
This can be in the same webpack.config as client building code - you can export an array and webpack will watch all of them.
Example webpack.config.js (top half is for server)
module.exports = [
{
name: 'server code, output to ./server',
entry: './index.js',
output: {
filename: './server/index.js'
},
target: 'node'
},
{
name: 'client side, output to ./public',
entry: './app.js',
output: {
filename: './public/app.js'
}
}
];
2.Watch Step
For the watch step, nodemon monitor changes and restart. Otherwise you could add a watch task to your server.js manually using something like fs.watch or node-watch.
Fairly new to this Behat stuff, and I've run into a roadblock I can't seem to get around. I've been staring at the docs, googling like it's my job, and doing my best to refrain from tossing my computer off the fire escape.
I'm working with a fairly complex project, and I'm not the one who set it up. So I'm a little lost in some areas.
Currently, I'm trying to use the Sahi driver, because selenium isn't cutting it for some dynamic forms I need to test. I can run the tests fine with the default selenium driver, but the tests fail because it doesn't adequately trigger JavaScript events on form input. Specifically, it'll work with the workarounds covered in that link, but only if I have the browser in focus. Which means it fails when the tests are run in sauce or via jenkins with xvfb.
I'm explaining all this only because this is my larger issue, which I'm attempting to address by using the Sahi driver. Which brings me to:
[Symfony\Component\Config\Definition\Exception\InvalidConfigurationException]
Unrecognized options "extensions" under "behat"
That's what I get when I try to activate the Sahi driver for a particular profile in my bahat.yml the way the documentation says to.
Here's the default profile and the profile I'm currently working with in my behat.yml (slightly modifies for public consumption):
default:
paths:
features: 'features'
bootstrap: '%behat.paths.features%/bootstrap'
sahi:
extensions:
Behat\MinkExtension\Extension:
sahi: ~
context:
class: 'FeatureContext'
parameters:
environment: 'staging'
mink: 'sahi'
Fwiw, the tests are on a vm, which I ssh -X into, then run the test using
$ behat --tags #test_name_tag --profile=sahi
When I'm using the default selenium driver and the #javascript tag, the browser pops up and the tests run and pass (assuming I keep the browser in focus, of course).
I installed the additional drivers using composer:
{
"require": {
"behat/behat": "2.4.*#stable",
"behat/mink": "1.4#stable",
"behat/mink-extension": "*",
"behat/mink-selenium2-driver": "*",
"behat/mink-sahi-driver": "*"
}
}
I've added use Behat\Mink\Driver\SahiDriver; to my MinkContext.php, EnvironmentContext.php and FeatureContext.php, though I'm guessing that's probably either overkill or not necessary. It doesn't seem to be making a difference at this point, though. I get the same error with or without it.
I also added a sahi.php which lives in features/bootstrap/mink:
<?php
return
array(
'default_session' => 'sahi',
'sahi' => array(
'capabilities' => array(
'browserName' => 'firefox',
'browserVersion' => 7,
),
),
);
I thought maybe adding a directory in features/bootstrap called exensions might help for some reason. Even stuck a file in there called sahi.php. That didn't help much.
I think that covers everything. Thanks in advance for any help, and if this is covered elsewhere, please direct me to it, because I've spent countless hours looking and haven't found anything that helps me.
Update:
I uninstalled the old versions of behat, mink and gherkin, and installed 2.4, et al as per this https://lestbddphp.wordpress.com/2012/08/31/behatcomposer/
I've been making my way through "Migrating from Behat 2.3 to 2.4" in the docs. (Sorry, SO won't let me post any more links, but it's in the official Behat docs.)
My composer.json:
{
"require": {
"behat/behat": "2.4.*#stable",
"behat/mink": "1.4#stable",
"behat/mink-goutte-driver": "*",
"behat/symfony2-extension": "*",
"symfony/class-loader": "2.1.*",
"symfony/form": "2.1.*",
"symfony/validator": "2.1.*",
"behat/mink-selenium-driver": "*",
"behat/mink-selenium2-driver": "*",
"behat/mink-extension": "*",
"behat/mink-sahi-driver": "*"
},
"minimum-stability": "dev",
"config": {
"bin-dir": "bin/"
}
}
I moved my behat.yml file to the root of the project, as directed. I updated my default profile to:
default:
paths:
features: 'features'
bootstrap: '%behat.paths.features%/bootstrap'
extensions:
Behat\Symfony2Extension\Extension:
mink_driver: true
kernel:
env: test
debug: true
Behat\MinkExtension\Extension:
default_session: symfony2
sahi: ~
though I'm not entirely sure that's what I need. Just going by the example given in the docs.
I updated my vendor/autoload.php by replacing the require_once with require:
<?php
// autoload.php generated by Composer
require __DIR__ . '/composer' . '/autoload_real.php';
return ComposerAutoloaderInit::getLoader();
but I'm a little confused by this, because that file is different from the example code in the docs. If I were to add the line in the docs here, instead of what was already there, then it would just be loading itself. (I tried. It barfed.) Am I completely dense, or is the wording here confusing/misleading? Did I do this correctly?
As I mentioned before, I have 3 context files in features/bootstrap:
FeatureContext.php
EnvironmentContext.php
MinkContext.php
When running the tests via cli, I pass it a --profile, and then it uses the appropriate profile in behat.yml. In almost all of the profiles, FeatureContext is used.
context:
class: 'FeatureContext'
FeatureContext then gets EnvironmentContext and MinkContext, from what I can tell. So, theoretically, everything should be working there.
Only it's not.
$ bin/behat --profile=sahi
[ReflectionException]
Class AppKernel does not exist
Before I added all the Symfony stuff, I was getting this:
Warning: require(Behat\Symfony2Extension\Extension): failed to open stream: No such file or directory in /path/to/project/vendor/behat/behat/src/Behat/Behat/Extension/ExtensionManager.php on line 112
Fatal error: require(): Failed opening required 'Behat\Symfony2Extension\Extension' (include_path='/usr/share/pear:/usr/share/php:/usr/share/git core/templates/hooks:.') in /path/to/project/vendor/behat/behat/src/Behat/Behat/Extension/ExtensionManager.php on line 112
Which is why I added the Symfony stuff via composer.
Also possibly of note: when I forgot to pass it a --profile, before installing the Symfony stuff via composer, I got this:
Notice: Undefined index: environment in /home/lbaron/development/BeHat-Functional/features/bootstrap/FeatureContext.php on line 43
Warning: include(/path/to/project/features/bootstrap/environment/.php): failed to open stream: No such file or directory in /path/to/project/features/bootstrap/FeatureContext.php on line 44
Warning: include(): Failed opening '/path/to/project/features/bootstrap/environment/.php' for inclusion (include_path='/usr/share/pear:/usr/share/php:/usr/share/git-core/templates/hooks:.') in /path/to/project/features/bootstrap/FeatureContext.php on line 44
Catchable fatal error: Argument 1 passed to EnvironmentContext::__construct() must be an array, boolean given, called in /path/to/project/features/bootstrap/FeatureContext.php on line 44 and defined in /path/to/project/features/bootstrap/EnvironmentContext.php on line 27
Which I guess is to be expected.
So I'm at a loss now. Ideas?
I'm going to keep banging on it to see if I can figure it out, but any ideas/input would be greatly appreciated.
Update again:
Removing the extensions section from yml gives me this:
Catchable fatal error: Argument 2 passed to Symfony\Component\BrowserKit\Client::__construct() must be an instance of Symfony\Component\BrowserKit\History, array given, called in /usr/share/pear/mink/src/Behat/Mink/Behat/Context/MinkContext.php on line 163 and defined in /home/lbaron/development/BeHat-Functional/vendor/symfony/browser-kit/Symfony/Component/BrowserKit/Client.php on line 52
Current state of behat.yml:
default:
paths:
features: 'features'
bootstrap: '%behat.paths.features%/bootstrap'
formatter:
parameters:
language: 'en'
extensions:
Behat\MinkExtension\Extension:
sahi: ~
goutte: ~
You are running a version of behat which is older that 2.4 (the current version). I can tell because the command you use is "behat" instead of "bin/behat". Older versions had a different architecture and did not use extensions. The documentation on the behat.org website is all for the new 2.4 version and, as far as I know, does not have the documentation for older versions available anymore. You should upgrade your behat version to 2.4, there is a guide on how to do this here