Yeoman copy directory with templating - templates

How can I copy multiple files in a whole folder recursively while applying templating ?
I found answers for copying folders without templating, templating individual files but not batch templating.
I currently do :
'use strict';
const Generator = require('yeoman-generator');
module.exports = class extends Generator {
writing() {
this.fs.write(
this.destinationPath('public'),
ejs.render(this.fs.read(this.templatePath('public')),
{
webPageTitle : 'great web application',
}),
);
);
}
where the public directory contains many files including index.html :
<head>
<meta charset="utf-8"/>
<meta content="width=device-width,initial-scale=1" name="viewport"/>
<title><%= webPageTitle %></title>
</head>
<body></body>
</html>
but yeoman throws an error :
Error generator-name
~/Documents/yo-test/generator-name/generators/app/templates/public doesn't exist
I understand yeoman expects a file and not a folder. I do not want to process each file individually. This would be both cumbersome and more difficult to maintain in the long run.
What is the right approach for both copying a complete folder with its subfolders and in the mean time batch templating all its files with yeoman ?

The right way I found :
this.fs.copyTpl(
this.templatePath('public'),
this.destinationPath('public'),
{
webPageTitle : 'great web application',
}
);
that copies the whole public folder and applies the templating substitution wherever possible.
As a result, the index.html is being applied the expected substitution during the recursive batch copy process of the public folder.

Related

Not able to integrate Amazon lex into my website

I have developed a aws lex chatbot .Now ,I want to integrate in my website on EC2 instance using pre-built UI component libraries as an embeddable iframe that is already available in github.This is the link to it: https://github.com/aws-samples/aws-lex-web-ui#iframe.Below is the code for the iframe from the github:
<html>
<head>
<title>My Parent Page</title>
</head>
<body>
<h1>Welcome to my parent page</h1>
<!-- loader script -->
<script src="./lex-web-ui-loader.js"></script>
<script>
/*
The loader library creates a global object named ChatBotUiLoader
It includes the IframeLoader constructor
An instance of IframeLoader has the load function which kicks off
the load process
*/
// options for the loader constructor
var loaderOptions = {
// you can put the chatbot UI config in a JSON file
configUrl: './chatbot-ui-loader-config.json',
// the full page chatbot UI that will be iframed
iframeSrcPath: './chatbot-index.html#/?lexWebUiEmbed=true'
};
// The following statement instantiates the IframeLoader
var iframeLoader = new ChatBotUiLoader.IframeLoader(loaderOptions);
// chatbot UI config
// The loader can also obtain these values from other sources such
// as a JSON file or events. The configUrl variable in the
// loaderOptions above can be used to put these config values in a file
// instead of explicitly passing it as an argument.
var chatbotUiConfig = {
ui: {
// origin of the parent site where you are including the chatbot UI
// set to window.location.origin since hosting on same site
parentOrigin: window.location.origin,
},
iframe: {
// origin hosting the HTML file that will be embedded in the iframe
// set to window.location.origin since hosting on same site
iframeOrigin: window.location.origin,
},
cognito: {
// Your Cognito Pool Id - this is required to provide AWS credentials
poolId: xxx
},
lex: {
// Lex Bot Name in your account
botName: yyy
}
};
// Call the load function which returns a promise that is resolved
// once the component is loaded or is rejected if there is an error
iframeLoader.load(chatbotUiConfig)
.then(function () {
console.log('iframe loaded');
})
.catch(function (err) {
console.error(err);
});
</script>
</body>
</html>
When I integrated this code and hosted my website,I could just see "Welcome to my parent page".I am not able to see my lex components here.I placed my index.html and lex-web-ui folder in same directory as two seperate files.Should I change my script src location?I am not sure where I am wrong
Sample:
cd /var/www/html
ls
index.html lex-web-ui(github folder)
The problem is that this inline javascript (in your html file) requires the loader.js file to run some of the functions it is calling.
<!-- loader script -->
<script src="./lex-web-ui-loader.js"></script>
This line right here is telling the html file where to find that javascript loader file. The ./ before the file name means that the file should be in the same parent folder as this html file.
So you have a couple choices, both very simple:
Either
(1) change the code to point to the folder actually holding the js loader file.
or
(2) move the html file into the same parent folder as the js loader file.
For the first option, just change the ./ to ./lex-web-ui/
<!-- loader script -->
<script src="./lex-web-ui/lex-web-ui-loader.js"></script>
For the second option, you can move around the files and folders however you'd like, just make sure that the .html file is in the same folder as the loader.js file. This way you don't need to change any code.
[www]
|
|--[html]
|
|--[lex-web-ui]
|
|--lex-web-ui-loader.js
|--index.html
|--(other lex-web-ui files)
Note: Do one OR the other, do not do both.

Go language strange behavior by handling templates

gotemplates
Hello!
I'm learning Go language now and trying to port some simple WEB code (Laravel 4).
Everything was well, until I tried to reproduce Blade templates into text templates.
I found that Go can load my CSS and JavaScript files only from the catalog with a name "bootstrap" only.
Here is my catalog tree which I tried to use:
start-catalog
bootstrap (link to bootstrap-3.3.1)
bootstrap-3.3.1
css
bootstrap.min.css
js
bootstrap.min.js
jquery
jquery (link to jquery-2.1.1.min.js)
jsquery-2.1.1.min.js
go_prg.go
Here are my templates:
base_js.tmpl
{{define "base_js"}}
{{template "login_1"}}
<script src = "/bootstrap/js/jquery"></script>
<script src = "/bootstrap/js/bootstrap.min.js"></script>
{{end}}
base_header.tmpl
{{define "base_header"}}
<head>
<title>PAGE TITLE</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
</head>
{{end}}
If the catalog name differs from "bootstrap" Go language or Firefox can't load files from the templates above: bootstrap.min.css, bootstrap.min.js, jquery.
If I use not the link but the catalog name directly "bootstrap-3.3.1" than Go or Firefox can't load.
If all required files are moved under "bootstrap" I'm getting the results I expected (exactly the same as in Laravel 4).
To launch go language code the command go run go_prg.go was used.
Environment: Ubuntu 14.04, go-1.3.3, Firefox 31.
Who's wrong: Go language, Firefox or me?
Any help will be highly appreciated!
The problem described was caused by
http.Handle("/bootstrap/", http.StripPrefix("/bootstrap/", http.FileServer(http.Dir("bootstrap"))))
before any template was handled. It allowed access files under the directory 'bootstrap' only.
The problem was fixed by changing to
http.Handle( , http.StripPrefix(, http.FileServer(http.Dir("."))))
and adding to pathes for CSS and JavaScript files. Like so
/bootstrap/js/jquery">.

Unable to load template file

Fatal error: Uncaught exception 'SmartyException' with message 'Unable to load template file '../index/index.tpl'' in
/var/www/docs/sw.com/public/library/Smarty/sysplugins/smarty_internal_template.php:174
Stack trace:
#0 /var/www/docs/sw.com/public/library/Smarty/sysplugins/smarty_internal_template.php(551): Smarty_Internal_Template->isExisting(true)
#1 /var/www/docs/sw.com/public/application/tmp/smarty_compile/898ca70906754084b81f61d3ce7baee3b11bd8d3.file.layout.tpl.php(46): Smarty_Internal_Template->getRenderedTemplate()
#2 /var/www/docs/sw.com/public/library/Smarty/sysplugins/smarty_internal_template.php(436): include('/var/www/docs/s...')
#3 /var/www/docs/sw.com/public/library/Smarty/sysplugins/smarty_internal_template.php(568): Smarty_Internal_Template->renderTemplate()
#4 /var/www/docs/sw.com/public/library/Smarty/Smarty.class.php(328): Smarty_Internal_Template->getRenderedTemplate()
#5 /var/www/docs/sw.com/public/library/Smarty/Smarty.class.php(370): Smarty->fetch('/var/www/docs/s...', NULL, NULL, NULL, true)
#6 /v in /var/www/docs/sw.com/public/library/Smarty/sysplugins/smarty_internal_template.php on line 174
I am using smarty template with zend framework and in that I create one more module like admin.In that module Controller is working and layout.tpl file is also working but problem is that when i add include file syntax in layout.tpl file that time same error is coming.
IndexController.php
<?php
class Admin_IndexController extends Models_UserCommonController
{
function init()
{
parent::init();
}
public function indexAction()
{
$this->view->assign('T_Body', '../index/index.tpl');
}
}
?>
layout.tpl
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>{$SITE_TITLE}</title>
</head>
<body>
<p>Hello</p>
{include file="$T_Body"}
</body>
</html>
index.php
Admin
I done same thing in windows its working but in ubuntu its not working.
I set all permissions and check everything path and all.
Default module is working in ubuntu but admin module is not working
Not too sure about the Smarty implementation but you have to remember that PHPs working directory is your projects root path.
You'd probably want to assign it absolutely with this manner:
$this->view->assign('T_Body', __DIR__ . '/../index/index.tpl');
Remember though that this only holds true for Zend Framework 2! Your code suggests that you're not using the second version but rather ZF1. Otherwise you absolutely should move forward and use namespaces and follow the tutorial on how to build your Controllers.

Including precompiled ember handlebar templates

I've successfully precompiled handlebars into one file using grunt-ember-templates, however, when including source in html file:
<script src="templates/app/compiledTemplates.js" type="text/javascript"></script>
It says this:
Resource interpreted as Script but transferred with MIME type text/plain: "file:///Users/jaime/voyant-svn/voyant-blocks/dev/blocks-web/src/main/webapp/templates/app/compiledTemplates.devjs".
What is the proper way of including precompiled handlebar templates?
I combine the compiled templates with my other scripts (jQuery/ember/ember-data/my app code) using grunt. Then in my index.html I simply include the single js script (helps cut down on the number of http requests also).
I'm currently using grunt for this, a simple "build" step might look something like the below. To use this you would need to install nodejs. Next you would npm install the following
grunt
grunt-cli
grunt-ember-template-compiler
grunt-contrib-concat
Once you have these installed you can run the build below from your root if you put the js into a file called "Gruntfile.js" -then simply execute "grunt" and it will output a deps.min.js (w/ your script and templates combined)
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-ember-template-compiler');
grunt.initConfig({
concat: {
dist: {
src: [
'website/static/website/script/vendor/handlebars-v1.2.1.js',
'website/static/website/script/vendor/ember.min.js',
'website/static/website/script/my-app.js’,
'website/static/website/script/dist/tmpl.min.js'],
dest: 'website/static/website/script/dist/deps.min.js'
}
},
emberhandlebars: {
compile: {
options: {
templateName: function(sourceFile) {
var newSource = sourceFile.replace('website/static/website/script/app/templates/', '');
return newSource.replace('.handlebars', '');
}
},
files: ['website/static/website/script/app/templates/**/*.handlebars'],
dest: 'website/static/website/script/dist/tmpl.min.js'
}
}
});
grunt.task.registerTask('default', ['emberhandlebars', 'concat:dist']);
};
This is how I do it in my app:
<script type="text/javascript" charset="utf-8" src="dist/templates.js"></script>
You can see the whole index.html file here:
https://github.com/joachimhs/WarmCroc-Ember/blob/master/index.html
In, fact, I just wrote this code today during a live-coding presentation on Ember.js. The talk is recorded as a screencast, and is available from http://emberjstraining.com
This talks should give you the pointers you need to get everything set up properly :)

Listing and Linking contents of a folder in JSP doesn't work

I have to make a Web Application for downloading files from a folder.I use Tomcat as a server.I wrote a JSP page for listing the content of my data folder,and I tried to make links for each file from this folder.
The JSP page is this:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1" import="java.io.File,java.io.IOException,java.util.*,java.io.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
Contents <br>
<% File f = new File("C:\\Users\\name\\Desktop\\eclipse\\app\\PTW\\WebContent\\data\\"); // current directory
File[] files = f.listFiles();
for (File file : files) {
if (file.isDirectory()) {
//System.out.print("directory:");
} else {
%>
<a href="<%=file.getAbsolutePath()%>" target="_blank"><br> <%=file.getName() %>
</a>
<%
}
}
%>
</body>
</html>
The problem is that downloading these files is working only in I.E. and only if user selects Right CLick - Save target As.
So my way to do this is wrong!But I don't understand why?How to force downloading files from this JSP?
Thank You!
You must know that the path to the file on the file system is a different path than the URL. The file system is only known by your server, the URL is the path which is accessed by browsers.
Let's say your file is in /opt/tomcat/webapps/myApp/folder/file.jpg and you are running your Tomcat on www.example.com. If you generate (through JSP) a link like
Download File
Your browser will see this path as:
www.example.com/opt/tomcat/webapps/myApp/folder/file.jpg
Your browser will not find the file. The URL the browser would neet to find it is:
www.example.com/myApp/folder/file.jpg
Which consists of
the domain www.example.com
the servlet context myApp
the path inside the application to the file folder/file.jpg
So you need to build the path /myApp/folder/file.jpg in your JSP. You can do it this way:
Download
I use Expression Language here instead of scriptlets. This is considered better style as it improves maintaineance and readability.
Note: This will only work if your File is inside the webapplication directory (myApp). If it is outside, you will need a servlet to stream your files to the client, but that is an other story.