I am integrating #jack-henry/banno-plugin-framework-bridge module in the plugin server. I have installed it globally and copied the banno-plugin-framework-bridge.js from dist folder to the root folder of the plugin server. I then included it in the response HTML as per following
<script type="module">
import { enableRouter } from "./banno-plugin-framework-bridge.js";
enableRouter();
</script>
Is this procedure right?
Also, I get the following error:
Cannot GET /banno-plugin-framework-bridge.js.
What must be going wrong?
Related
Problem Summary
Storybook snapshot test on static storybook returning blank screenshots even though they look fine on localhost:8080 when I ran npx http-server storybook-static
Tech stack and relevant code
Vue 3
Vite
Storybook
Jest
Storyshots
Puppeteer
I have components and their respective stories. npm run storybook works perfectly fine. My storybook.spec.js is as follows:
import { imageSnapshot } from "#storybook/addon-storyshots-puppeteer"
import initStoryshots from "#storybook/addon-storyshots"
initStoryshots({
suite: "Image storyshots",
test: imageSnapshot(
storybookUrl: 'file://absolute/path/to/my/storybook-static'
)
})
I ran the following. fyi, I did not modify any file in storybook-static after running npm run build-storybook.
npm run build-storybook
npm run test
npm run test constitutes jest --config=jest.config.js test
Problem
Unfortunately, the screenshots I get are all blank and fail the snapshot test.
I suspect it might be due to a CORS error just like other Storybook users when they click <project-root>/storybook-static/index.html after running npm run build-storybook, to which I want to ask for a solution as well, because I wanna run test remotely on a headless server.
Note
I used absolute path because relative path caused a resource not found error during the testing process.
The problem is that you're running the tests from file:// instead of http://. So the URI is file:// and the img url ends up like this after applying some url logic: path.resolve(window.location, '/your-image.png') file:///your-image.png.
If this is the case you could change to http://. You can start a express server and serve the storybook-static folder from setupGlobal and then shut it down in teardownGlobal. Then you will need to change your storybookUrl to http://localhost:<some-port>.
None of the images were loading within my pipeline but worked fine locally, ended up being because the components were fetching images using a relative path <img src="/my-image" /> which apparently is not allowed using the file protocol.
I ended up doing 2 things:
Updating the static dirs directory to use the root by updating the main.js file in storybook
module.exports = {
staticDirs: [{ from: '../static', to: '/' }],
}
Added a script to remove the leading slash of images in the preview-head.html file from storybook
<script>
document.addEventListener('DOMContentLoaded', () => {
Array.from(document.querySelectorAll('img')).forEach((img) => {
const original = img.getAttribute('src');
img.setAttribute('src', original.replace('/', ''));
});
});
</script>
Another (arguably better) approach would be to run the tests through a server where you can access the images
In JMeter I am passing multiple JSON inputs as body, Variable name is defined as JSON_FILE and coming from CSV Data Config
${__FileToString(${__eval(${JSON_FILE})}.json,,)}
CSV Data
designO1015643320
.
.
designO1077673985
designO1088516727
Running load test from Jmeter UI works fine, but running as mvn project is giving error about FileNotFoundException even though .csv file and .json files are in same folder as .jmx file
Error from .jmx.log:
WARN - jmeter.functions.FileToString: Could not read file: designO1015643320.json File 'designO1015643320.json' does not exist java.io.FileNotFoundException: File 'designO1015643320.json' does not exist
Response in .jtl:
httpSample t="4" lt="0" ts="1508530091457" s="false" lb="CreateDesign_PUT" rc="Non HTTP response code: org.apache.jorphan.util.JMeterStopThreadException" rm="Non HTTP response message: End of sequence" tn="Design_APIs 1-1" dt="text" by="1822" ng="1" na="1"/>
JMeter GUI default relative path is the bin folder
Relative paths are resolved relative to the current working directory (which defaults to the bin/ directory).
Maven search in different default path for files src/test/jmeter directory
See guide:
in the src/test/jmeter directory. When running the project, the JMeter Maven plugin searches for tests to run in this directory.
And you can find this path dynamically
I heard Groovy is a new black so I would recommend replacing your __FileToString() function with __groovy() function, the Groovy equivalent of dynamically getting the file path relative to Maven's plugin current working directory would be something like:
${__groovy(new File(org.apache.jmeter.services.FileServer.getFileServer().getBaseDir() + System.getProperty('file.separator') + vars.get('JSON_FILE') + '.json').text,)}
See JavaDoc on FileServer class for more details.
I have following directory structure of my project.
I have following code in my index.js file for loading website.json file.
index.js
componentDidMount() {
$.ajax({
url: "../website.json",
type: "GET",
dataType: 'json',
ContentType: 'application/json',
success: function(data) {
this.setState({data: data});
console.log(data);
}.bind(this),
error: function(jqXHR) {
console.log(jqXHR);
}.bind(this)
})
}
The problem is that I am using npm start command to server my react app from local directory of my application. This serves my app at http://localhost:3000/ . Now the problem is that the application tries to load the website.json file from http://localhost:3000/website.json which gives a 404 not found error.
So, my question is how my website.json file can be loaded from my project directory instead of localhost.
Note: my project folder is not at localhost but at virtual host.
Update: I am specifically asking why the ajax call is unable to load data from my project folder (I am using relative addressing) and instead including path from localhost. I want to load data using ajax call is it possible or not.
Your webserver (I would guess Express) will be serving files from the 'public' folder.
For security reasons, web servers do not allow access to files outside of the directory root (/public in your case), so you will not be able to get the file by ajax (or from the browser).
If you really want to, you could either:
Copy/Move the file into the public folder
Create a symlink to the file in the public folder
You may include it inside source as
var website = require('../website.json');
So it will be embedded during compile time.
Another way to do it - move website.json to public folder, than you may access it as ajax('/website.json'...
I assume you are using ES6/ES2015 since you are using react. So instead of doing it in componentDidMount you can just add this at the top:
import websiteData from '../website.json';
And then you can just use websiteData as a variable in your component.
I am trying to host a static Progressive Web App using ExpressJS, but since I'm fairly new to web dev I'm having some trouble.
I have found a number of great articles on how to use ExpressJS for routing (see links below), but none of them have helped me resolve my problem. These tutorials are quite basic and I can't find any tutorials which are more advanced - if you guys know of any please reply to this thread and link them!
https://www.tutorialspoint.com/nodejs/nodejs_express_framework.htm
https://stormpath.com/blog/build-nodejs-express-stormpath-app
https://zellwk.com/blog/crud-express-mongodb/
https://www.codementor.io/nodejs/tutorial/build-website-from-scratch-using-expressjs-and-bootstrap
My folder structure looks like this:
node_modules
package.json
server.js
index.html
sw.js (service worker)
public/
js/
index.js
style/
index.css
and my server.js looks like this:
var express = require('express');
var app = express();
// Initialize static content
app.use(express.static('public'));
app.get('/index.html', function(req, res) {
res.sendFile(__dirname + '/index.html');
});
app.listen(8887);
In my index.html I am loading my public/style/index.css stylesheet and public/js/index.js javascript like this:
<link rel="stylesheet" href="public/style/index.css">
<script src="public/js/index.js"></script>
When I host my app using the command 'node server.js' and I navigate to http://localhost:8887/index.html, then I get served the correct index.html file but without the index.css file.
Here are my problems:
My style sheets aren't being served correctly (index.html renders
without any css)
The browser is not picking up the service worker (sw.js)
Edit: Moving sw.js to the public/ folder causes an error when the service worker loads: GET http://localhost:8887/sw.js net::ERR_INVALID_RESPONSE.
Edit 2: More service worker errors:
I would suggest to register the express static like that:
var path = require('path');
app.use(express.static(path.join(__dirname, 'public')));
and then, reference your scripts like that:
<link rel="stylesheet" href="/style/index.css">
<script src="/js/index.js"></script>
What the service worker is doing?
I have just started working with WebRTC. I want to use WebRTC with NodeJS.
Currently I have tried webrtc.io package. When I write a basic code for using WebRTC, I get the following JavaScript error.
Error is :
Uncaught TypeError: Type error
rtc._socket.onopen
Error Location:
webrtc.io.js:65
Here is my code.
CLIENT CODE :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 getUserMedia</title>
<script src="socket.io.min.js" type="text/javascript"></script>
<script src="webrtc.io.js" type="text/javascript"></script>
<script>
rtc.connect('ws://abc.in:8001');
</script>
</head>
<body>
<video id="webcam" width="500" autoplay></video>
</body>
</html>
SERVER CODE :
var webRTC = require('/usr/local/node_modules/webrtc.io').listen( 8001 );
console.log( "Server Listening" );
webRTC.on( "connection", function() {
console.log( "Hi" ); // This gets executed successfully.
});
Q1.
Since "Hi" does get printed successfully, I don't know if JS error is actually making a difference or no. Help me resolve this JS error issue.
Issue also reported here.
Q2.
Hitting http://abc.in:8001/ through browser prints "Not implemented". Is that an issue?
Q3.
I wish to stream the audio+video from a mic and webcam to the server.
I understand that I need to create a peer to peer connection to achieve streaming of audio+video to server. Browser should act as one peer and the server would act as the second peer.
How do I send the WebRTC stream to the server? Lack of documentation of the webrtc.io package isn't helping me either.
Please help
EDIT : Browser used is the latest Google Chrome, Version 31.0.1650.57 m
I uploaded simplest webRTC code at
http://github.com/aungthuya-jse/simplest-webRTC/tree/master
You need to add the node_modules to under of project folder by installing
npm install express
and
npm install webrtc.io
after installation you will see /project-folder/node_modules/express folder and webrtc.io folder