I've a simple web server for e2e purposes, built with create react app and react app rewired.
Cypress runs perfectly against this web server, the only issue I am facing is about the fonts.
They are included with an external url.
Since I launch the web server regularly, the react application is able to be fed with the url for the proper fonts.
Once Cypress open the browser with the command cypress open the console log shows this error and fonts indeed are not loaded.
GET https://[URL.EXTENSION]/[FONT.WOFF2] net::ERR_EMPTY_RESPONSE
BEGIN EDIT
I noticed that the issue occurs on my company VPN and not on my regular network configuration, so as I already said, the fonts are not loaded just in the browser of Cypress, if I
view the website from a regular browser
access those fonts url copying them in the browser
any issue is occurring
END EDIT
Where is lying the error? Do I miss something in the configuration?
Thanks
Related
I am working on a project which is using rails for its backend and react components for its frontend. The app works fine in the Safari browser but for some unknown reason, in the chrome app, it loads the correct path but just renders a white screen showing nothing. If I check the developer tools console, I get to see the following errors
Similarly I refreshed the page and opened the network tab in developers tool and got to realise that some of the packages have not been downloaded.
The point to note is that the app also requires a certificate for running it locally and I have already downloaded that certificate and trusted it so it should also not be a problem. I am stuck at it for a really long time. Can anyone tell me the solution?
As the app works fine in safari, I don't think its related to code but its just a guess. So far I have tried disabling all the extension as well as clearing the browser data but haven't been able to see any progress...
I have reactjs application with express server. I want to have my application as SEO friendly. I am using react-helmet to add SEO meta tags. How can I check SEO meta tags in dev mode?
You can launch an Ngrok session on your dev server port.
ngrok http 3000
Ngrok will give you an URL and you'll have to put this URL in https://metatags.io
If you are using react client side rendering. You should be able to see them in chrome dev tool.
(If you don't know how to open dev tool in chrome browser then just right click anywhere in the page and click inspect elements and go to elements panel.)
Remember react client side rendering will execute only when your bundle is fully downloaded on users browser.
Google now executes javascript too when indexing pages. If all that matters to you is google search engine then you are good.
you can go to google search console to debug how google sees your site if its deployed out there for public to access
But if you want to be sure that your web pages are understood by all search engines like bing,duckduckgo,baidu (which may or may not execute javascript) then you either need to do prerendering of all pages using some sort of tool like react-static / prerender or start rendering your webpages on server side and serve the html directly.
find all meta details below mentioned ways
using view source
in browser inspect element
https://checkseo.io
Hello Guys !
Today I deployed an app online to test it but didn't understood very well why it didn't work.
What I did :
I've created a sample react app using bootstrap and used firebase to deploy it. Here is the link.
What was expected ?
I wanted the app to be able to be downloaded on the phone as angular.io is.
Reality :
Nothing special. It's in fact registered in service worker and very fast to load and download, but nothing more.
Problem now :
I've done it today two times but wasn't able to use it as well as the image of service workers I had.
What should I do ?
You need a a 144px square PNG icon to be defined in your manifest.json to enable the web app install banner.
You can validate whether your application can be added to your homescreen from Chrome on a desktop computer.
To do so, open the Chrome developer tools on your website, open the 'Application' tab, click 'Manifest' in the left navigation and then click 'Add to homescreen'.
If there's a problem adding to homescreen an error will appear in the console, when trying it on the website you mentioned I received the error 'Site cannot be installed: a 144px square PNG icon is required, but no supplied icon meets this requirement'.
You can read more about the requirements for web app install banners here https://developers.google.com/web/fundamentals/app-install-banners/.
I use the angular-fullstack/generator-angular-fullstack for my project and for testing purpose I would like to run my project on two different browser windows.
The problem is that I got the same input for each text field on both browsers simultaneously.
For example:
On the login page, if I type my email address on one browser it will appear on the login email field in the other browser.
Any ideas of what I'm doing wrong?
Your project uses browserSync.
When your project is opened using localhost:3000, you should browse to localhost:3001 that will give you a BrowserSync configuration page.
Under Sync Options on that page you can disbable what to sync.
Background:
I've built a Angular Application that works fine on browsers.
On the frontend side I have HTML/CSS/Angular/Bootstrap, backend side is Web API. So it is completely separated.
I took my front code zipped it, used Phonegap to build android app. When I run it I can see the first screen of my web site. I've confirmed that the angular code there works, cause I can see it filtered navigation based on the fact the user is not logged in.
But when I try to go to any other page of my app I get an empty screen, so I tried to remotely debug it using PG remote debugger. Every time I try to load anything but my homepage I loose connection to my target. I haven't seen any JS errors in console.
This is the only thing in the logs:
"exception firing pause event from native"
"exception firing resume event from native"
Is there some part of configuration that I missed that could cause this behavior, or is there another way I can debug this?
Since you are using angularJS, I'm guessing you are using a webserver locally to make the app run on your browser, so everything seem to work fine
Although PhoneGap uses a file server to run your app on WebView, which is similar to just opening the index.html on browser without webserver. Bottom line is if you can make your app work on desktop browser by just opening your index.html without webserver then it will work when u build as PhoneGap app.
You might run into Cross-Origin issues when testing your app on browser, this will happen if your app is making REST API calls or if you are loading angularJS templates from another .html file, these Cross-Origin restrictions are taken care in PhoneGap build. So when testing on local browser you might want to open Chrome with web security disabled.
If you have developed your app using a webserver to test, then you might have absolute URLs for loading assets or hrefs, you will have to change these to relative URL paths.
For example, change <a href="/#/next-page"> to <a href="#/next-page">, or <img src="/images/logo.png"> to <img src="images/logo.png">