My application makes use of polymer for front-end and app engine endpoints (Java) for my backend. For reasons I don't understand, my endpoints client is not loading and I could see some strange url requests failing which seem to have been modified by app-route in my polymer front-end. I see the following failures:-
https://(app-id).appspot.com/_ah/api/images/gweld_logo.png - Failed to load
resource: the server responded with a status of 404 ()
https://(app-id).appspot.com/src/_ah.html - Failed to load resource: the server responded with a status of 404 ()
My polymer code is based on the starter kit provided by polymer-cli. Here's the code for my-app.html:-
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
.
.
<template is="dom-if" if="{{!userSignedIn}}">
<div class="container">
<paper-card image="/images/gweld_logo.png" alt="(Company Name)" class="logo">
<div class="card-content horizontal layout center-justified">
Company Portal
</div>
<div class="card-actions horizontal layout center-justified">
<google-signin label-signin="Sign-in"
client-id="(client-id)"
scopes="https://www.googleapis.com/auth/userinfo.email"
signed-in="{{userSignedIn}}">
</google-signin>
</div>
</paper-card>
</div>
</template>
<template is="dom-if" if="{{userSignedIn}}">
.
.
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="/view1" paper-drawer-toggle>View One</a>
</iron-selector>
.
.
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
role="main">
<my-view1 name="view1"></my-view1>
<my-view404 name="view404"></my-view404>
</iron-pages>
.
.
</template>
.
.
Polymer({
is: 'my-app',
properties: {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
}
},
observers: [
'_routePageChanged(routeData.page)'
],
_routePageChanged: function(page) {
this.page = page || 'view1';
},
_pageChanged: function(page) {
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
this.importHref(resolvedPageUrl, null, this._showPage404, true);
},
_showPage404: function() {
this.page = 'view404';
}
In my-view1.html, I make use of google-client-loader element to load the client for my app engine endpoints api.
Here's how I defined static-files in appengine-web.xml:-
<static-files>
<include path="/service-worker.js"/>
<include path="/bower_components/**.js"/>
<include path="/*.json"/>
<include path="/index.html"/>
<include path="/src/**.html"/>
<include path="/bower_components/**.html"/>
<include path="/bower_components/**.css"/>
<include path="/images/*.png"/>
<include path="/**.ico"/>
</static-files>
I have the following in my web.xml:-
<servlet>
<servlet-name>SystemServiceServlet</servlet-name>
<servlet-class>com.google.api.server.spi.SystemServiceServlet</servlet-class>
<init-param>
<param-name>services</param-name>
<param-value>(values removed here)</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>SystemServiceServlet</servlet-name>
<url-pattern>/_ah/spi/*</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
While I want index.html to be loaded for all requests, I don't want any request to load the client library intercepted by my client side routing. Please let me know how I can solve the above issues. Also, what is the correct practice to use client side routing (app-route) with app engine endpoints?
Related
I try to create a React app inside visualforce page via lightning. When I click preview in visualforce setting, everything is fine.
But when I use it in Lightning app builder it does not work. It shows
The error: Refused to frame 'https://mirage-video-dev-ed--ltng.container.lightning.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://mirage-video-dev-ed--c.visualforce.com".
Also really weird that if I right click and choose "Reload frame", it works.
Visualforce code
<apex:page >
<apex:includeLightning />
<div id="hello" />
<script>
$Lightning.use("c:myFirstApp", function() {
$Lightning.createComponent("lightning:container",
{ src: "{!$Resource.hello + '/index.html'}"},
"hello",
function(cmp) {
console.log("created");
// do some stuff
}
);
});
</script>
</apex:page>
myFirstApp
<aura:application access="global" extends="ltng:outApp">
<aura:dependency resource="lightning:container"/>
</aura:application>
Is there a way to fix it? I cannot find the way to load aura:application directly so if there is a way please show me.
You've got a bit of a inception problem going on... You just need to mount your react app directly inside of the VF page. No need to use a lightning:container.
See my B.A.S.S. project. This is proven to work and be extremely scalable.
Example VF Page with react app:
<apex:page showHeader="true" sidebar="false" standardStylesheets="false" docType="html-5.0">
<script type="text/javascript">
//rest details
const __ACCESSTOKEN__ = '{!$Api.Session_ID}';
const __RESTHOST__ = '';
</script>
<div id="root"></div>
<!-- Your react entry point -->
<script type='text/javascript' src="{!URLFOR($Resource.app, 'dist/app.js')}"></script>
</apex:page>
It is also possible to to run a React App directly inside a LWC, although no recommended.
We have a site where Google Tag Manager seems to be blocking the saving of changes in the HTML Module. GTM is implemented to spec and otherwise functions the way we expect.
When Google Tag Manager is on the page HTML Module changes do not save. When it's removed changes save properly.
No javascript errors are being thrown. No DNN Admin Log errors are being recorded.
I am searching for answers and hoping someone else has seen this before.
To insert GTM I am using the following as my SiteAnalytics.config and GoogleAnalytics.config:
<!-- SiteAnalytics.config -->
<?xml version="1.0" encoding="utf-8" ?>
<AnalyticsEngineConfig>
<Engines>
<AnalyticsEngine>
<EngineType>DotNetNuke.Services.Analytics.GoogleAnalyticsEngine, DotNetNuke</EngineType>
<ElementId>Head</ElementId>
<InjectTop>True</InjectTop>
<ScriptTemplate>
<![CDATA[
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','[TRACKING_ID]');</script>
<!-- End Google Tag Manager -->
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '[TRACKING_ID]');
</script>
]]>
</ScriptTemplate>
</AnalyticsEngine>
<AnalyticsEngine>
<EngineType>DotNetNuke.Services.Analytics.GoogleAnalyticsEngine, DotNetNuke</EngineType>
<ElementId>Body</ElementId>
<InjectTop>True</InjectTop>
<ScriptTemplate>
<![CDATA[
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=[TRACKING_ID]"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
]]>
</ScriptTemplate>
</AnalyticsEngine>
</Engines>
</AnalyticsEngineConfig>
<!-- GoogleAnalytics.config -->
<?xml version="1.0" encoding="utf-8"?>
<AnalyticsConfig xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<Settings>
<AnalyticsSetting>
<SettingName>TrackingId</SettingName>
<SettingValue>GTM-CODEHERE</SettingValue>
</AnalyticsSetting>
<AnalyticsSetting>
<SettingName>UrlParameter</SettingName>
<SettingValue />
</AnalyticsSetting>
<AnalyticsSetting>
<SettingName>TrackForAdmin</SettingName>
<SettingValue>true</SettingValue>
</AnalyticsSetting>
</Settings>
</AnalyticsConfig>
So far I have tried:
removing all tags from GTM except Universal Analytics
setting the GTM code to .defer=true instead of .async=true (see Google Tag Manager delaying window.load?)
minimizing my theme (skin.ascx) by removing my custom javascript
loading GTM on DOMContentLoaded (see JavaScript that executes after page load)
Validating the skin template the W3C's HTML checker
Continuing on today.
This was a strange issue with a stranger solution, so strange that I should probably change the title of the question. Maybe the site with this issue was a one-off but just in case here is the answer.
I discovered that it wasn't Google Analytics code causing the issue but something in DNN that was conflicting between SiteAnalytics.config and the DNN HTML module. In the code snippet below (from SiteAnalytics.config) I was inserting the noscript tag for GTM using this XML:
<AnalyticsEngine>
<EngineType>DotNetNuke.Services.Analytics.GoogleAnalyticsEngine, DotNetNuke</EngineType>
<ElementId>Body</ElementId>
<InjectTop>True</InjectTop>
<ScriptTemplate>
<![CDATA[
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=[TRACKING_ID]"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
]]>
</ScriptTemplate>
</AnalyticsEngine>
I discovered by accident that my issue was resolved when I removed everything between the CDATA tags or the whole CDATA itself. Next I tried reinserting the noscript while changing InjectTop from True to False. That also solved my issue.
So what I know is that injecting anything at the top of the Body using SiteAnalytics.config caused a conflict with the DNN HTML module on this particular site. One would assume that this would be due to some bad HTML on the page or a custom script causing a conflict. However I validated the template through W3C's checker and there were no issues. I also removed all our custom scripts to no avail. So the exact mechanism of the original conflict is unknown but the issue is solved. Below is the updated code:
<!-- SiteAnalytics.config -->
<?xml version="1.0" encoding="utf-8" ?>
<AnalyticsEngineConfig>
<Engines>
<AnalyticsEngine>
<EngineType>DotNetNuke.Services.Analytics.GoogleAnalyticsEngine, DotNetNuke</EngineType>
<ElementId>Head</ElementId>
<InjectTop>True</InjectTop>
<ScriptTemplate>
<![CDATA[
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','[TRACKING_ID]');</script>
<!-- End Google Tag Manager -->
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '[TRACKING_ID]');
</script>
]]>
</ScriptTemplate>
</AnalyticsEngine>
<AnalyticsEngine>
<EngineType>DotNetNuke.Services.Analytics.GoogleAnalyticsEngine, DotNetNuke</EngineType>
<ElementId>Body</ElementId>
<InjectTop>False</InjectTop>
<ScriptTemplate>
<![CDATA[
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=[TRACKING_ID]"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
]]>
</ScriptTemplate>
</AnalyticsEngine>
</Engines>
</AnalyticsEngineConfig>
<!-- GoogleAnalytics.config -->
<?xml version="1.0" encoding="utf-8"?>
<AnalyticsConfig xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<Settings>
<AnalyticsSetting>
<SettingName>TrackingId</SettingName>
<SettingValue>GTM-CODEHERE</SettingValue>
</AnalyticsSetting>
<AnalyticsSetting>
<SettingName>UrlParameter</SettingName>
<SettingValue />
</AnalyticsSetting>
<AnalyticsSetting>
<SettingName>TrackForAdmin</SettingName>
<SettingValue>true</SettingValue>
</AnalyticsSetting>
</Settings>
</AnalyticsConfig>
I'm trying to integrate Spring MVC4 + Angular JS but i have some problems to load template from AngularJS side. On the net there are a lot of resources, but IMHO a bit confused.
Right now i've setup a simple controller that render a page under webapp/WEB-INF/jsp. This works fine but when in this page i try to load js (angular library) i got error (resource unavailable).
I've added this to my view.jsp and resource is not loaded:
<script src="resources/js/angular/angular.js"></script>
I'm my dispatcher-servlet.xml i have the follow configuration:
<mvc:annotation-driven />
<bean id="jspViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
<property name="prefix" value="/WEB-INF/jsp/"/>
<property name="suffix" value=".jsp"/>
</bean>
<mvc:resources mapping="/resources/**" location="/resources/" />
To load correctly my angular library, i have to use c tag library, why ?
<script src="<c:url value="/resources/js/angular/angular.js" />"></script>
Next on it, i have created a template under webapp/WEB-INF/jsp/templates/main.jsp and i'm trying to load it using $routeProvider (i've tried to load main.jsp too, but the error is the same - resource not found)
angular.module('MyApp', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'templates/main'
});
});
My answer is:
How i can load "library" without using c taglib ?
What i have to add to my configuration to load templates from AngularJs ? (using templateUrl) ?
Thanks a lot!
I would like to integrate Spring MVC with Angular JS without any Template Engine
I checked a few answers, but I could not resolve it . Below I have listed Xml,Controller and Html files. What I am missing here exactly?
app-Servlet.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:beans="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
<annotation-driven />
<context:component-scan base-package="com.angular.app" />
<resources mapping="/views/**" location="/WEB-INF/views/" />
<resources mapping="/resources/**" location="/resources/" />
<beans:bean
class="org.springframework.web.servlet.view.ContentNegotiatingViewResolver">
<beans:property name="order" value="1" />
<beans:property name="mediaTypes">
<beans:map>
<beans:entry key="html" value="text/html" />
</beans:map>
</beans:property>
</beans:bean>
<beans:bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<beans:property name="order" value="2" />
<beans:property name="prefix" value="/WEB-INF/views/" />
<beans:property name="suffix" value="" />
</beans:bean>
</beans:beans>
Controller
#RequestMapping(value = "/", method = RequestMethod.GET)
public String home(Locale locale, Model model) {
logger.info("Welcome home! The client locale is {}.", locale);
Date date = new Date();
DateFormat dateFormat = DateFormat.getDateTimeInstance(DateFormat.LONG,
DateFormat.LONG, locale);
String formattedDate = dateFormat.format(date);
model.addAttribute("serverTime", formattedDate);
return "home.html";
}
#RequestMapping(value="/app/welcome",method = RequestMethod.GET)
public #ResponseBody String welcome() {
logger.info("entering into original controller");
System.out.println("entering into original controller");
String text="Hello World!!!! Welcome";
return text;
}
home.html
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<div>
Name: <input type="text" ng-model="name">
</div>
<p ng-bind="name"></p>
<div ng-controller="helloworldcontroller">
<h1>{{title}}</h1>
</div>
</div>
<script>
function helloworldcontroller($scope, $http) {
$http.get("http://localhost:8080/app/welcome").success(
function(response) {
$scope.title = response;
alert("sucess");
});
}
</script>
</body>
</html>
I'm working on some projects using the architecture Spring MVC + AngularJs and can give you feedback about:
You are trying to control the routes of html pages through the Spring MVC Contollers and I think this is not the best approach, since the AngularJs has its own engine to control routes and pages through the ng-route or ui-router.
In architectures of my projects work with a Spring MVC project providing a whole REST API to be consumed by a web AngularJs application.
The project structure is as follows:
parent-maven-project:
|_project-core: Have all bussiness logic, data source config, persistence config, Services, Repositories, Entities, etc.
|_project-web: Have a angularJs App (that controls the html pages routing using ui-router), API REST (Spring MVC Controllers) to be consumed and give the business layer access (project-core).
|_project-ear: Pack core and web projects to deploy on JBoss EAP 6.2
In Spring MVC REST layer (project-web) | set up a Spring OAuth2 server that is used to authenticate users and make the session & access control through Spring Security. When the user logs into the application, the angularjs application receives an access token Bearer that is used to make the user requests during all the time that he remain logged in. All REST services are in request scope, are stateless, then the token is used to retrieve the Spring Security session and make all user access validation.
I keep getting the following error:
HTTP method POST is not supported by this URL
when trying to build on my local machine using google app engine.
The code in ShowJSPServlet.java file:
package helloJSP;
import java.io.IOException;
import javax.servlet.http.*;
public class HelloJSPServlet extends HttpServlet
{
#Override
public void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException
{
resp.setContentType("text/html");
resp.getWriter().println("Hello, world");
}
}
My web.xml file is:
<?xml version="1.0" encoding="utf-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
<servlet>
<servlet-name>ShowJSP</servlet-name>
<servlet-class>helloJSP.ShowJSPServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ShowJSP</servlet-name>
<url-pattern>/ShowName</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>hello.jsp</welcome-file>
</welcome-file-list>
</web-app>
The hello.jsp file contents are:
<%# page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<body>
<form id="mainform" method="post" action="/ShowName">
<div>
Name: <input id="url" type="text" size="100"/>
<input type="submit" id="gobtn" value="Go" style="width: 70px"/>
</div>
</form>
</body>
</html>
This is the first time I am developing in JSP technology. What am I missing?
One problem is in your web.xml:
<servlet-class>helloJSP.ShowJSPServlet</servlet-class>
should be
<servlet-class>helloJSP.HelloJSPServlet</servlet-class>
Does that help?