Changes in denjucks templates not reflected on refresh unless server is restarted - deno

I am using 'deno' and 'oak'. for auto refreshing I am using 'denon' which is similar to 'nodemon' in nodejs. as a template engine, third party module, I am using - 'denjucks'. Whenever, I do any change in template code and save, server is not restarting automatically. How to solve this issue?

You can use exts options and add html.
{
"scripts": { /* */ },
"watcher": {
// The number of milliseconds after the last change.
"interval": 350,
// The file extensions that it will scan for.
"exts": ["js", "ts", "json", "html"],
// The globs that it will scan for.
"match": ["*.*"],
// The globs that it will not scan for.
"skip": ["*/.git/*"],
// Use the legacy file monitoring algorithm. (walking)
"legacy": false
}
}

Solved the issue. In denon.json file added following -
"watcher": {
"exts": ["js", "ts", "json", "html"]
}
This adds html file in watcher list.

Related

Gruntjs - Watch/Browsersync doesn't reload php

So I am using grunt to help me develop sites.
For last two weeks I am having issues with Browsersync/Watch.
When I am making changes to a php files, browsersync doesn't detect any changes. Even, when I am reloading the site manually, source code is not updated. Most funny part is, this code gets updated after "some time" or when I am restarting grunt.
watch: {
php: {
files: ['*.php', '**/*.php'],
}
},
// Run Browser Sync
browserSync: {
default_options: {
bsFiles: {
src: [
"**/*.php",
"*.php",
]
},
options: {
watchTask: true,
proxy: 'g.test',
}
}
}
Does anyone had familiar issue?
Do you have a body tag in your PHP files?
Also, when running grunt, do you have a script (like one below) injected under body?
<script id="__bs_script__">
//<![CDATA[document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.7'><\/script>".replace("HOST", location.hostname));
//]]>
</script>

Adding Facebook login to Angular2-Meteor app

I am attempting to add Facebook authentication into an Angular2-Meteor app that started off as the Socially app from the tutorial and is slowly being modified into something less generic. There doesn't seem to be much posted on this particular use case however.
Note: I've asked in the Meteor forums and Gitter without success already.
Here are the steps I've taken:
Added Service Configuration package using
meteor add service-configuration
Created a file at server/services.ts containing (with my actual keys):
ServiceConfiguration.configurations.upsert({
"service": "facebook"
}, {
$set: {
"settings": {
"appId": “appid”,
“secret": "secret",
"loginStyle": "popup"
}
}
});
But on compile, I get an error saying
cannot find name 'ServiceConfiguration'
Which makes me think the package didn't install properly, but uninstalling/reinstalling it has not resolved the issue and it is showing in my .meteor directory.
Client side I'm calling this method with a click event on a button in a component that does have Meteor imported:
facebook() {
Meteor.loginWithFacebook((err) => {
if (err) {
//Handle error
} else {
//Handle sign in (I reroute)
this.router.navigate(['/home']);
}
})
Which throws the console error
meteor_1.Meteor.loginWithFacebook is not a function
But I suspect this is secondary to the fact that ServicesConfiguration isn't registering.
Git repo of the project is here: https://github.com/nanomoffet/ng2-starter with the referenced files being server/services.ts and client/app.ts
Currently it is not possible to use the ServiceConfiguration in TypeScript. What I did in my application was that I created a Javascript file in which I did make the ServiceConfiguration calls.
meteor add service-configuration
Create the file ./server/service-config.js
Meteor.startup(() => {
ServiceConfiguration.configurations.remove({
service: "facebook"
});
ServiceConfiguration.configurations.insert({
service: "facebook",
appId: '<APP_ID_YOU_GET_FROM FROM_FACEBOOK>',
loginStyle: "popup",
secret: '<SECRET_YOU_GET_FROM_FACEBOOK>'
});
});
I only tested it with Google and works fine for me.

DataTables editable (where to put the editable_ajax.php file)

I'm trying to edit my tables content by following this example DataTables example
In my twig page I've added this script at the end:
$(document).ready(function() {
/* Init DataTables */
var oTable = $('.dataTable').dataTable();
/* Apply the jEditable handlers to the table */
oTable.$('td').editable( 'editable_ajax.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "auto",
"width": "auto"
} );
} );
the file editable_ajax.php is in the folder where my twig page is.
When I try to edit a cell I see with the debugging tool that the 'editable_ajax.php' file is not found, Can someone tell me where I should place it please ?
I'm sorry to say, but you seem to not have a good grasp of how templating and Symfony in general work. You're mixing very different things (PHP code, twig templates, Javascript code).
So, first read the Symfony Book. I would also suggest reading up on Javascript.
Some mistakes:
PHP files should never be in the "views" folder (aka. with twig files)
Javascript runs on the client side so you need to think about URLs when calling server-side code (aka. php code) NOT filesystem paths.
Javascript (jQuery is just a library) should not be in a twig file, but it's own *.js file and linked with a <script> html tag.

Use wiredep to inject custom CSS

I need to inject custom CSS files everytime they are created after being compiled by gulp-less. So I tried to use wiredep with custom configurations, but without success.
I changed the tag from 'bower:css' to 'custom:css', specifically to my custom task. The bower:css for default wiredep injection is still there. But after run myinjection task nothing is injected even running the task without errors.
Another weird thing, when I run my task, the files injected by wiredep (the default) disappear.
What I'm missing?
Basicaly my files structure is like this:
|---app
|---styles
|---***
*.css
*.html
.custom.json
I'm not sure if I really need a file similar to bower.json, but I made may own custom.json
{
"name": "custom",
"version": "0.0.1",
"main": [
"app/styles/**/*.css",
"app/scripts/**/*.js //pretend to inject custom js later
]
}
The task in gulpfile.js is like this:
gulp.task('myinject', function () {
var myinject = require('wiredep').stream;
var combined = Combine (
gulp.src('app/*.html'),
myinject({
directory: 'app',
bowerJson: require('./custom.json'),
dependencies: false,
html:
{
block: /(([ \t]*)<!--\s*custom:*(\S*)\s*-->)(\n|\r|.)*?(<!--\s*endcustom\s*-->)/gi,
detect: {
js: /<script.*src=['"](.+)['"]>/gi,
css: /<link.*href=['"](.+)['"]/gi
},
replace: {
js: '<script src="{{filePath}}"></script>',
css: '<link rel="stylesheet" href="{{filePath}}" />'
}
}
}),
gulp.dest('app')
);
combined.on('error', function(err) {
console.warn(err.message);
});
return combined;
});
Thanks in advance
I had a similar issue that I resolved with gulp-inject rather than wiredep.
Wiredep works fine with me when I need to include a third-party dependency (e.g. a bower package with a valid main file declared in the bower.json or a file with the same name as the directory).
However, when you want to include only a specific file (e.g. only the main.css of html5-boilerplate) gulp-inject is much simpler. Here is an extract of the doc :
gulp.task('index', function () {
var target = gulp.src('./src/index.html');
var sources = gulp.src(['./src/**/*.js', './src/**/*.css'], {read: false});
return target.pipe(inject(sources))
.pipe(gulp.dest('./src'));
});

Requirejs' order does not work with priority config and CDN dependencies

The following main.js code do not respect the order of priorities (sometimes underscore.js is not loaded when backbone.js needs it):
require({
baseUrl:'/scripts',
priority:[
"http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js",
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js",
"http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js",
"http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"
]
},["src/app"],
function (app) {
app.start();
});
Adding order! before those CDN dependencies fails with a order.js not found error.
I recently updated the RequireJS docs, but I have not pushed the change to the site yet:
The "priority" configuration cannot load resources loaded by plugins. So to accomplish what you are trying to do, you can just nest require() calls, which will give you the behavior you want:
require(
{
baseUrl:'/scripts'
},
[
"require",
"order!http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js",
"order!http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js",
"order!http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js",
"order!http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"
],
function (require) {
require(["src/app"], function (app) {
app.start();
});
}
);
This assumes you have the order plugin in the /scripts/order.js location.

Resources