An error occurred while requesting the visualization manifest - google-data-studio

I am following https://codelabs.developers.google.com/codelabs/community-visualization#8 steps to create my visualization with manifest resources
"resource": {
"js": "gs://community-viz-docs-123/myViz.js",
"config": "gs://community-viz-docs-123/myViz.json",
"css": "gs://community-viz-docs-123/myViz.css"
}
but I am having "An error occurred while requesting the visualization manifest" error when I add path of manifest in data studio community visualization.
As shown in this image

Please enter in Data Studio for the manifest path:
gs://community-viz-docs-123/myviz/

Related

React App on AWS Amplify hosting shows blank screen after adding rewrite rule

I have a React App hosted on AWS Amplify which worked fine - but I had the problem of getting "Access Denied" errors when reloading pages. I found the solution by adding the appropriate Rewrite rule (i.e. Getting an "Access Denied" error when I reload my React app on AWS Amplify).
But after adding the rule, my App does not load at all, not even for the root path ("/"), the page remains blank. I can see my index.html content, but the React App does not load.
My rewrite rule:
[
{
"source": "</^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>",
"target": "/index.html",
"status": "200",
"condition": null
}
]
I know others ran into this as well - any suggestions?
Thanks
Daniel

How to debug server-side code in a express.js/React/Redux/gql/Apollo stack in VSC?

Coming from a PHP background I am having real trouble debugging server-side code using the following set-up:
Visual Studio Code
Yarn
node.js/express.js
React
Redux
gql/Apollo
I start the local server with yarn start and then "Launch Edge against localhost" with the following launch.json...
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "msedge",
"request": "launch",
"name": "Launch Edge against localhost",
"skipFiles": ["<node_internals>/**"],
"url": "http://localhost:3001",
"webRoot": "${workspaceFolder}"
}
]
}
I have made changes to a gqp call but I am unable to get the debugger to trigger inside what I believe to be the server-side code that executes the database query located at src/data/queries/[filename].js OR after the call is made on the client side, nor do I see any error that could shed some light on what has gone wrong.
Could someone please kindly point me in the right direction for debugging in this kind of set-up? At the moment the call seems simply to fail and nothing happens.
Thank you.

aws amplify react deployment throwing manifest syntax error

I am having issues after deploying React application using AWS amplify.
Couple of issues here:
I see that there was a reference to %PUBLIC_URL% in the public/index.html. In the documentation, it says %PUBLIC_URL% will get replaced with the URL of the public folder during the build. It doesnt seem to be happening. Not sure what build means here.
I replaced %PUBLIC_URL% with /. I seem to be getting Manifest: Line: 1, column: 1, Syntax error.
I tried adding crossorigin="use-credentials" as suggested in one of the forums, but that doesnt seem to have any effect.
I have sifted through reference to this error and none seem to be pointing to the solution.
Appreciate any pointers.
S
I ran into the same issue. This worked for me:
Open Amplify console
'App settings' > 'Rewrites and redirects', click 'edit'
click 'Open text editor'
paste this:
[
{"source": "/manifest.json",
"target": "/manifest.json",
"status": "200",
"condition": null
},
{
"source": "</^((?!.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>",
"target": "/index.html",
"status": "200",
"condition": null
}
]
Note: the redirect of the manifest MUST be before the index.html

Access Denied Error from protected routes from react app hosted on AWS Amplify

I have hosted my react app on AWS Amplify. On trying to access a protected route of the application I am getting the following error on screen
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>3C8377104116CA48</RequestId>
<HostId>nL3bDs+kXEWE8uBFPTLkFLpRg6CCmKfejftWs5wmTWYO6K6WDzpwsDXJCFTK0EFhjJdaHECfuos=</HostId>
</Error>
How do I resolve this?
I found a solution myself from one of AWS forum where a user was kind to share the solution he got from AWS support. I guess AWS does not want the world to know the solutions to the problems it creates so as to sell the support package. Anyway, here is the solution:
In AWS Amplify console in 'Rewrites and Redirects' section add this record
Source Address: </^((?!\.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>
Target: /index.html
Type: 200 (Rewrite)
That is it. It magically gets resolved. I don't know why this has to be done or what went wrong in the first place, but taking this action resolves it.
Vinit Khandelwal answer is correct but if anyone is looking for the documentation regarding this issue, here it is. It's a simple configuration add in the Amplify console. Works like a charm!
https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa
When you create a project through the amplify console it automatically creates rewrite rules. When you create a project from the CLI it does not create rewrite rules.
You can copy the re-write rules Amplify uses on a project created from the console to the rewrite rules for your project.
I've included the rewrite rules below.
[
{
"source": "/<*>",
"target": "/index.html",
"status": "404-200",
"condition": null
},
{
"source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>",
"target": "/index.html",
"status": "200",
"condition": null
}
]

Manifest.json for progressive web app not working

I am trying to get the manifest.json file working for my web app. Unfortunately it is not working right. I am receiving the following error in the chrome devtools:
Line: 1, column: 1, Unexpected token.
I am pretty sure that the JSON is valid but it probably has something to do with the path in the html-head. What am I doing wrong here?
I am linkin it in my html like this:
<link rel="manifest" href="/manifest.json">
The manifest looks as following:
{
"short_name": "Tabbs Web App",
"name": "Tabbs Web App",
"description": "Tabbs is an digital booking service for the night life scenery",
"icons": [
{
"src": "favicon.png",
"sizes": "1024x1024",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "fullscreen",
"theme_color": "#F5C33E",
"background_color": "#ffffff"
}
This is my map structure:
Hopefully someone can find the issue! Cheers!
First issue, your start_url is not valid. You should learn to use how to generate Lighthouse report to help yourself find such issue cause.
Instead of having start URL as this
"start_url": "./index.html",
Try this or simply remove "." from the above URL and try, it all depends on your build and hosting, manifest and index.html locations, etc. So you have to try multiple and see what works.
"start_url": "http://tabbs-web-app.herokuapp.com/discover/home",
I'm not getting the error that you have mentioned.
I'm getting the below one though, which is because your site loads content from non HTTPS requests. If you are targeting to make your site a PWA one, convert all HTTP request over HTTPS and add a service worker.
Site cannot be installed: the page is not served from a secure origin
Here is the Lighthouse audit report, which says Manifest is not

Resources