I am trying to get an object from aws-s3 (a test file with dictionnary inside) with Vue.js and Amplify for a frontend project. I would like to see the content of the file on my interface.
I'm simply using Amplify library with this tag in my component.vue:
<template>
<amplify-s3-text text-key="file_name" />
</template>
I configured the file aws-exports.js like this:
const awsconfig = {
"aws_project_region": "eu-west-1",
"aws_cognito_identity_pool_id": "eu-west-1:xxxxxxxxxxxxxx",
"aws_cognito_region": "eu-west-1",
"aws_user_pools_id": "eu-west-xxxxx",
"aws_user_pools_web_client_id": "xxxxxxx",
"oauth": {},
"aws_user_files": 'enable',
"aws_user_files_s3_bucket": 'bucket_name',
"aws_user_files_s3_bucket_region": 'eu-west-1',
};
export default awsconfig;
I'm working on an EC2 instance so I use a forwarded port to view my app on localhost.
But I can't see anything in my interface. The error on the console is:
axios-http-handler Error: Request failed with status code 403
I am using an existing backend, so I don't want to use amplify/CLI.
I didn't find anything more in the official documentation (https://docs.amplify.aws/ui/storage/s3-text/q/framework/vue).
How can I display the content of this s3 file on my interface ?
Related
I am trying to serve a static HTML file using the res.sendFile() method from my express.js server that is hosted on AWS Lambda using the Serverless framework. Assuming that I am trying to serve an HTML file from the directory src/views/users/index.html.
In deployment, this is the file path that I have tried to serve my HTML file from /var/task/src/views/users/vindex.html, but I keep getting the error Error: ENOENT: no such file or directory, stat '/var/task/src/views/users/index.html' when viewing the AWS Cloudwatch log.
app.use(express.static(__dirname));
path.resolve(__dirname, "./src/views/users/index.html");
This is the results I get when I run tree src locally:
Have anyone experienced this issue before, and have solved it? Thank you so much!
Well, after many grueling hours and trying many solutions, I have found a workaround to render the html content without actually needing to render a .html file.
I ended up making a helper method that returns a string of the html content and send the html content string using the res.send() method instead.
html helper function
export const htmlHelper = () => {
return `<html content goes here>`;
}
route method
app.get('/html', (_, res) => {
const htmlString = htmlHelper();
return res.send(htmlString);
})
Is it possible to add support for the "usb" policy when Google Colab creates an IFrame for a code cell, for example:
import IPython
from google.colab import output
IPython.core.display.display(IPython.display.HTML('''
<button id="button">test</button>
<script>
document.querySelector('#button').onclick = async () => {
device = await navigator.usb.requestDevice({ filters: [{
vendorId: 0xABCD,
classCode: 0xFF, // vendor-specific
protocolCode: 0x01
}]});
};
</script>
'''))
creates an Iframe with:
<iframe allow="accelerometer; autoplay; camera; gyroscope; magnetometer; microphone; serial; xr-spatial-tracking" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-popups-to-escape-sandbox" src="https://ro7dmmbz8ec-496ff2e9c6d22116-0-colab.googleusercontent.com/outputframe.html?vrz=colab-20210722-060124-RC00_386208851" class="" style="height: 40px;"></iframe>
I would need to have "usb;" added to the list of the "allow" attribute. As I am currently getting the following error:
VM10:3 Uncaught (in promise) DOMException: Failed to execute 'requestDevice' on 'USB': Access to the feature "usb" is disallowed by permissions policy.
at HTMLButtonElement.document.querySelector.onclick (:3:34)
It looks like Google Colaboratory is based on the Jupyter project. I found an open issue related to adding the necessary allow attribute to enable the Geolocation API in iframes within a notebook. The same attribute is required to enable APIs like WebUSB. I recommend opening an issue on the project's issue tracker asking for WebUSB support specifically.
I have a problem, I have already generated OpenApi Swagger files (swagger.json and swagger.yaml) Is it possible somehow in Ktor (kotlin) import this files and start swagger-ui server on specific route ?
I have visited ktor-swagger project but could get how just to add json file to display swagger-ui.
Any suggestions ?
Make you json file accessible from static routing
Create "files" directory in resources dir
Use next code to routing static files from "files" dir
routing {
static("/static") {
resources("files")
}
//...
}
Lets name json file "test.json", then put you it in "files" folder
so now you run the app and see this file by http://localhost:8080/static/test.json
Then we need to install and configure OpenApiGen
Add OpenApiGen dependencies you can find how to do this here https://github.com/papsign/Ktor-OpenAPI-Generator
Then use the following code
install(OpenAPIGen) {
serveSwaggerUi = true
swaggerUiPath = "/swagger-ui"
}
now you can use http://localhost:8080/swagger-ui/index.html?url=/static/test.json URL to see your file through the swagger UI
Also, you can provide your own route to using redirection
get("/api") {
call.respondRedirect("/swagger-ui/index.html?url=/static/test.json", true)
}
this will allow you to use just http://localhost:8080/api
I am using the Vue plugin for Matomo which is found here: https://github.com/AmazingDreams/vue-matomo
I imported the VueMatomo plugin in my main.js entry file like so:
import VueMatomo from 'vue-matomo';
Then, I assign the VueMatomo as a global method in my main.js file like so:
Vue.use(VueMatomo, {
// Configure your matomo server and site
host: 'https://matomo.example.com',
siteId: 1,
// Enables link tracking on regular links. Note that this won't
// work for routing links (ie. internal Vue router links)
// Default: true
enableLinkTracking: true,
// Require consent before sending tracking information to matomo
// Default: false
requireConsent: false,
// Whether to track the initial page view
// Default: true
trackInitialView: true,
// Changes the default .js and .php endpoint's filename
// Default: 'piwik'
trackerFileName: 'piwik',
// Whether or not to log debug information
// Default: false
debug: false
});
How do I implement tags within this plugin? Would I just set the trackerUrl to my container url like this:
// Overrides the autogenerated tracker endpoint entirely
// Default: undefined
trackerUrl: 'https://mycontainer.js'
Also how do I send custom data. For example:
'user':{
'role':'consumer',
'type':'purchaser'
}
edit: In the Matomo tag manager documentation it says to put this in the head tag.
<!-- MTM -->
<script type="text/javascript">
var _mtm = _mtm || [];
_mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src='https://mycontainer.js'; s.parentNode.insertBefore(g,s);
</script>
<!-- End MTM -->
So is that still required with the vue-matomo plugin or can you put
g.src='https://mycontainer.js'
somewhere else?
Under the hood, the Vue Plugin simply exposes to you the Matomo tracking client SDK. You can call any of the native SDK functions listed in their SDK on their website by going through this.$matomo.
You can actually see that they do this in the source code:
const Matomo = MatomoJS.getTracker(trackerEndpoint, siteId)
// Assign matomo to Vue
Vue.prototype.$piwik = Matomo
Vue.prototype.$matomo = Matomo
Where MatomoJS is resolved through import Matomojs from './matomo' which is just a flat javascript file that packaged their public SDK.
I'm using Vue CLI 3 version 3.0.5.
In project configuration, I use Nightwatch as e2e test tool.
I try to use page objects, so I had nightwatch.config.js file in project root, and add page_objects_path inside like below:
{
page_objects_path : "/tests/e2e/page-objects"
}
Then I create page-objects folder as this path: /tests/e2e/page-objects.
Then I setup a page object Entry.js under that folder and try to use it in test:
/tests/e2e/page-objects/Entry.js
vmodule.exports = {
'Test Page Object': browser => {
browser
.url(process.env.VUE_DEV_SERVER_URL)
.waitForElementVisible('#app', 5000)
browser.page.Entry().sayHello()
browser.end()
}
}
And the error message shows:
Cannot read property 'Entry' of undefined .
It looks like my page object setup is not correct...
Could anyone help providing a correct implementation of NightWatch page object in Vue CLI v3.0.5 ? Thanks...
Ah, I know why it won't work.
Because nightwatch.config.js is a javascript file, I should export it first, then the plugin can read it.
module.export = {
page_objects_path : "/tests/e2e/page-objects"
}
Sorry for the dumb question.