NodeJS: Express: node-blade: Live UI - node.js

I am using Node.JS/express and node-blade (npm blade) as the template engine.
I'm trying to take advantage of the fantastic Live-UI feature set in Blade, but can't seem to get the Live updating views working; i.e when rendering content into an element any changes to the Model after the initial render are not reflected in the view.
The client side isn't throwing any errors, and events such as {click} and {change} work in the templates, but the view won't update to any changes in the Model without re-rendering the template.
On the browser;
systemVM = new blade.Model({test: 'stackoverflow'});
$('#wrap').render('pub/login', systemVM);
In the template;
h1 Hello #{test}
input
{change}
test='World!';
Have also tried; (on the browser)
systemVM.observable.test = 'World';
And; (on the browser)
systemVM.observable.test = 'World';
systemVM.invalidate('test');
And; (on the browser)
systemVM.observable.test = 'World';
systemVM.invalidate('test');
systemVM.sync();
Has anyone had experience getting this going?
It's also worth mentioning that the file 'plugins/deps/deps-utils.js' was missing from the spark-standalone.sh build script for using Meteor's 'Spark' and while spark built without it and isn't throwing any errors, I can't help but think that might be the issue. Have tried building spark-standalone from historical git commits, but every time the build throws errors.
Any help would be really appreciated, this is driving me crazy!

Issues were resolved by the standalone Spark.js file found at http://icomputeconsulting.com/spark.js (hope BMiner doesn't mind me posting this link)
Use this link: Un-official GitHub Repo

Related

Docusign: Sample Code Cannot Connect to '/app-shell'?

I'm using the sample code provided by DocuSign in the Github project "qs-01-node-embed-signing-ceremony-master".
I've obtained and added my accessToken and accountId.
When the sample code is run via npm start, it displays an error message in the browser window:
Cannot GET /app-shell
Chrome dev tools shows this:
The sample code appears to contain no file named app-shell.
How can I correct this?
I looked at this sample code and tried it from scratch. I cannot find a file named workbox-core.dev.js in there and when I tried it - it worked just fine.
Please check if this is not something in your environment that may be causing this.
Try a new fresh clone from scratch just in case.
It looks like there are unaddressed caching anomalies with the demo code. Selecting "Empty Cache and Hard Reload" in Chrome fixed it.
After successfully signing the test doc, I still got the "Cannot GET /app-shell" message, but that glitch seems to be specific to the demo code.
Hopefully this is enough of a test for me to start implementing Docusign in my app.
Note: It appears that this demo was not built with create-react-app or other tech that auto-rebuilds and reloads the page when the source is edited.

Broadleaf - running locally - problem getting started the API project

I'm trying to run Heat Clinic 6.0.1 locally following getting started tutorial: https://www.broadleafcommerce.com/docs/core/current/getting-started/running-locally
I managed to run admin and site but not the API project. The application starts without problems but when I go to http://localhost:8082/api/v1/swagger-ui.html I get a 404. In the log I see this exception:
javax.servlet.ServletException: Circular view path [error]: would dispatch back to the current handler URL [/error] again. Check your ViewResolver setup! (Hint: This may be the result of an unspecified view, due to default view name generation.)
Also trying to log in directly in the API with user broadleafapi and password gives 404.
My environment: Windows 10, jdk 8, maven 3.6
What's wrong? Can you help me? Thank you
Thanks for the report. I reproduced this and it looks like that with the update to Spring Boot 2.0, we did not appropriately override the updated property that specifies the servlet location to embedded Tomcat. Thus, when you went to /api/v1/swagger-ui.html, the application treats it exactly like that URL which is what gave the 404.
Setting the server.servlet.contextPath=/api/v1 property appropriately stripped off this path as part of the servlet context and resolved the 404.
I tested around a bit and was able to 'Authorize' the app (button at the top right of the Swagger page) with the credentials information that get spit out in the logs:
Basic auth configured with user broadleafapi and password: <<generated>>
then I was able to hit the API endpoints.
The changes you will need to make locally in your project to consume the fix are at https://github.com/BroadleafCommerce/DemoSite/commit/422d1cdc37f847afd8bec0be477ab784cbad2e9d#diff-991c59b6dbb0f619b8570d8f8779eaddR11. You will notice that I moved the original definition in default.properties over to common.properties and I recommend that you do the same. To be clear, follow these steps:
Delete the server.servlet.contextPath entry in `api/src/main/resources/runtime-properties/default.properties
Change server.servletPath in api/src/main/resources/runtime-properties/common.properties to server.servlet.contextPath
Thanks for trying out Broadleaf and the report, sorry for the rough early start!

Content Security Policy violation in a fresh Ember app

Today I created my first Ember App using the ember-cli:
ember new my-app
cd my-app
ember serve
so that it appears by url localhost:4200.
I fail on the next step:
Change content of the basic template application.hbs
After I perform some text changes I hit Cmd+S and reload the page the content remains the same.
The browser console is "clean", but I get error messages in the terminal
Content Security Policy violation: {}
The content of application.hbs:
<h2 id="title">This is a test message</h2>
{{outlet}}
My environment:
ember version: 0.2.3, node: 0.12.2, npm: 2.7.6.
I've searched for answers on Stack, but mostly they concern apps that have some external data requests, but my project is brand new and fresh, so I'm confused.
Looking forward to your replies,
Thanks!
UPDATE:
Some additional info:
I figured out that the problem is that the ember app does not "hear" the trigger, when a file has been changed. I don't receive a
file changed templates/application.hbs
notification in the terminal. Something globally is blocking or interrupting the regular app run.
Still looking forward receiving your suggestions !
Apparently the problem has nothing to do with Content Security Policy violation. It is a local issue of the file system. The terminal didn't display messages that changes were triggered in the template file application.hbs - as a result no updates.
The current solution is starting the ember server with an option:
ember serve --watcher=polling
As soon as I figure out the initial problem I'll return and update this answer.
Cheers

What is a recommended way to get data into your meteor template from the front-end for a famous surface?

I've been following along with the book Discover Meteor from https://www.discovermeteor.com/ and I have built the tutorial project called 'Microscope'
This uses iron-router and Meteor templating system to render out the front-end. I want to redo this project using famo.us for the front-end but I am unclear on how I to do so.
I am aware of a package called famono. mrt add famono. Using this package I can integrate famo.us and draw surface to the screen in a meteor project. It also allows you to render templates to the screen.
But I am confused on how to redo the project so the router - routes to render a famous surface with the data.
Also I am wondering if the templates will still be reactive.
If someone could provide insight on how to redo the 'Microscope' project to use famo.us on the front-end I would greatly appreciate it!
Thanks
UPDATE (to be more specific)
I have been trying to figure out how to integrate famous with templates and routing, and I have no clue how to do it.
I use iron-router to handle my routing which chooses which template and data to render like so:
Router.map ->
#route 'posts',
path: '/',
data: ->
Posts.findOne()
So this will load up the posts template with Posts.findOne() data.
But I know with famous I can generate surfaces from templates on the front end like so:
background = new Surface
template: Template.post
data: ??? (Posts.findOne()) ???
mainContext.add(background)
Because javascript is what is going to load the final template into the view, what is the recommended way for me to get the data for that template, should I query the database from the front-end by setting up special subscriptions?
Typically I render the data into the page from the router on the server but...
with famous, I just have to load the main template and let famous load the rest of the templates. The only thing left is getting the data for the other templates. What is recommended?
I would start by looking at https://github.com/gadicc/meteor-famous-components/. That package will do all the work for you if you want.
I have never used the Surface template argument but I believe that is a one time load and will not update on data invalidation (data change).
Or u can take a look at working examples )
https://github.com/sayawan?tab=repositories

Drag 'n' Drop files to a Chrome Package App?

Has anyone successfully implemented drag and drop with files from desktop to the app?
I've tried just putting this drag 'n' drop example into the index file but I just get this error:
Can't open same-window link to "file:///C:/Users....whatever"; try target="_blank".
Please share your stories, what you've tried and if you have succeed :)
Some resources to help you:
New Chrome Packaged Apps codelab that we've been working on covers drag-and-drop in both AngularJS and pure JavaScript.
AngularJS drag-and-drop: https://github.com/GoogleChrome/chrome-app-codelab/tree/master/lab5_data/angularjs/2_drop_files
JavaScript drag-and-drop: https://github.com/GoogleChrome/chrome-app-codelab/tree/master/lab5_data/javascript/2_drop_files
There's an early version of docs too for AngularJS drag-and-drop for Chrome at developer.chrome.com/trunk/apps/app_codelab5_data.html#handle_drag_and_dropped_files_and_urls
We're working on the docs to cover both samples though.
I have done this a while ago and it worked.
The problem you've got is that you are creating a file url, then trying to navigate to the url. The navigation is failing, not the read. It's failing due to CSP, and you probably won't be able to override that with a different CSP due to security restrictions we've placed on allowable CSPs.
But, you should be able to just read the file and use the content. You need to change that sample code to use ReadAsText or ReadAsArrayBuffer instead of readAsDataURL. Look here for more details.
Please let us know how you get on!
Just listening for drop won't work. You will have to prevent the default functionality of dragover.
document.body.addEventListener('dragover', function(e) {
e.preventDefault();
}
document.body.addEventListener('drop', function(e) {
alert('it works!')
}

Resources