I serve my site over this url.
Here is the code that I have in my next.config.js file for the cache policy:
module.exports = {
...
async headers() {
return [
{
source: '/:all*(svg|jpg|png|gif)',
locale: false,
headers: [
{
key: 'Cache-Control',
value: 'public, max-age=5184000, must-revalidate',
},
],
},
]
},
}
If you access the website with Chrome, there is no issue. But with Firefox, here is what you get:
Basically, the images are not being loaded correctly, and I don't understand the error... The other elements are being loaded correctly.
Another weird thing is that:
If I do "Ctrl+Shift+R", none of the images will load.
If I do "Ctrl+R", some will succeed to load.
It's as if the server needed some time before being able to load the images. I don't know NextJS enough to debug that, though...
I finally nailed it!
Basically, custom protocol handlers like: window.open(myprotocol://open${params}, '_self') are immediately stopping the page from loading on Firefox. I'm not sure if this is expected, though.
I just had to wait for the page to load:
React.useEffect(() => {
const onLoad = () => window.open(`myprotocol://open${params}`, '_self')
window.addEventListener('load', onLoad)
return () => window.removeEventListener('load', onLoad)
}, [])
Related
I',m Tailwind css for my Next project and it looks like it is not getting cached.
Website URL: https://elaborate-hotteok-0c5bac.netlify.app
Do I need to do something to make sure the static content like CSS and basic JS should get chached on the production?
Here is the SS even after loading the page twice
https://prnt.sc/rt3d2rGKORrV
https://prnt.sc/2bLNlII1QcIB
And here is my tailwind config file
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
'./app/**/*.{js,ts,jsx,tsx}',
'./templates/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
plugins: [],
}
And next config file
module.exports = {
reactStrictMode: false,
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'cdn.shopify.com',
},
],
},
}
enter code here
I am using Cypress version 10.9.0 for e2e testing. Of course, there are more step defs but it stops at the first then step as it can be seen from the SS image.
When('I enter an invalid username on the login page', () => {
cy.get('#username').type('portal').invoke('removeAttr', 'value').click({ force: true }, { timeout: 30000 })
cy.get('#password').type('SwY66bc3VZLUFR9')
cy.get('[type="submit"]').click()
})
Then('an error message is displayed with the text Invalid username/password', () => {
cy.get(".invalid.text-left").should('contain.text', 'Invalid username/password')
})
Cypress GUI error
DOM element
The error says cannot find #username but clearly it is present, so you may have a shadowroot in the DOM above the <input>.
If so, add a configuration to allow searching within, in cypress.config.js
const { defineConfig } = require('cypress')
module.exports = defineConfig({
e2e: {
baseUrl: 'http://localhost:1234'
},
includeShadowDom: true,
})
If you don't see shadowroot, look for an <iframe> element.
Handling an iframe is best done with Cypress iframe
I am trying to get nuxt-socket-io working on my NuxtJS application, but my emit functions do not seem to trigger the actions in my vuex store.
nuxt.config.js has the following code:
modules: [
'#nuxtjs/axios',
'nuxt-socket-io'
],
io: {
sockets: [
{
name: 'main',
url: process.env.WS_URL || 'http://localhost:3000',
default: true,
vuex: {
mutations: [],
actions: [ "subscribeToMirror" ],
emitBacks: []
},
},
]
},
That subscribeToMirror action is present in my vuex store (in index.js):
export const actions = {
async subscribeToMirror() {
console.log('emit worked');
try {
new TopicMessageQuery()
.setTopicId(state.topicId)
.setStartTime(0) // TODO: last 3 days
.subscribe(HederaClient, res => {
console.log("Got response from mirror...");
return res;
});
} catch (error) {
console.error(error);
}
}
};
And that action should be triggered by the emit in my index.vue script:
mounted() {
this.socket = this.$nuxtSocket({
name: 'main',
reconnection: false
})
},
methods: {
...mapMutations([
'setEnv',
'initHashgraphClient',
'setTopicId',
'createNewTopicId'
]),
...mapActions([
'createAndSetTopicId'
]),
subscribeToMirror() {
console.log("method worked");
return new Promise((res) => {
this.socket.emit('subscribeToMirror', {}, (resp) => {
console.log(resp)
resolve()
})
})
}
}
While I can see the 'method worked' console output from index.vue's subscribeToMirror method, I have never seen the 'emit worked' message. I have played around with this for hours, copying the instructions from this guide but have had no success.
Can anyone spot what I'm doing wrong?
UPDATE: I tried copying the code from this example and was unable to get a response from that heroku page. So it appears that I am completely unable to emit (even though $nuxtSocket appears to be functional and says it's connected). I am able to confirm that the socket itself is up and running, as I was able to get responses from it using the ticks from that example. I'm putting the repo for this project up here for viewing.
UPDATE2: I made a much simpler project here which is also not functioning correctly but should be easier to examine.
It turns out that while nuxt-socket-io functions as a wrapper for socket.io stuff you still need to actually create the server. This is a good template for how to do this
I am running a cypress test, in which I visit a url that has many redirects.
I wish to get all redirects and write them to a file.
Doing this code works somehow
describe(`Test Offer URL`, () => {
let urls = [];
it(`Visits the offer url ${Cypress.env(
"offer_url"
)} with a pre-defined user agent of ${userAgent}`, () => {
cy.visit(Cypress.env("offer_url"), {
headers: { "user-agent": userAgent },
});
cy.on("url:changed", (url) => {
urls.push(url);
});
cy.log(urls);
});
after(() => {
cy.writeFile("cypress/results/offers.json", {
baseUrl: Cypress.env("offer_url"),
userAgent,
redirectUrls: urls,
});
});
});
so with this code cy.on("url:changed", (url) => { urls.push(url);});
I am able to get all the needed urls, I can check this with cy.log(urls)
But when i write the file I wont have them all
I thought to run the cy.writeFile() function inside of the url onChange trigger, but I get an error :
I tried chaining with a .then(() => cy.writeFile()) but it will only write the file one time
Any clues of how I could resolve this.
I am using laravel 6.0 and use vue components.After npm run dev I refresh the page and name(data on component) not showing. but after I refreshing page few times It will show up and some time again not showing the data (name) coming from request.
ExampleComponent.vue
<h5>{{name}}</h5>
data() {
return {
name: ''
}
},
mounted() {
axios.get('/api/user')
.then(response => {
console.log(response);
this.name = response.data.name;
});
},
Console log show the data and but sometime it not show in vue component. but some time works fine.In both time console log data shows correctly.
console log screenshot
I have already tried with
mounted() {
let self = this;
axios.get('/api/user')
.then(response => {
console.log(response);
self.name = response.data.name;
});
},
But nothing changed on situations.
It's better you can use created() instead of mounted(). created() fetch data when the component is created. Please have a look - click-here